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What will you learn from this book? 

You want to create web pages that are dynamic, interactive, data-rich, con¬ 
nected. Wait, web pages? Why not use HTML5 to create full-blown web 
applications? And, why not do it using modern techniques that apply as 
easily to your desktop browser as they do to mobile devices? And, of course, 
you want to do it with all the newest HTML5 technologies, like geolocation, 
video, 2D drawing, web storage, web workers and more. Right? 

Head First HTML5 Programming is your express ticket to learning how to 
build web applications using today’s standards and tomorrow’s best 
practices. Sure, you’ll learn the basics of HTML5’s new APIs in this book, 
but even better, you’ll learn how those APIs interact with your pages, how 
they re powered by JavaScript, and how you can use them to build web apps 
that will impress your boss and amaze your friends. 
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What’s so special about this book? 

We think your time is too valuable to waste struggling with new concepts. 
Using the latest research in cognitive science and learning theory to craft a 
multi-sensory learning experience, Head First HTML5 Programming uses a 
visually-rich format designed for the way your brain works, not a text-heavy 
approach that puts you to sleep. 
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modern web apps on 
any platform, you need 
the thorough introduc¬ 
tion to key HTML5 
features provided by 
Head First HTML5 
Programming. The 
authors not only guide 
you through deep 
real-world client-side 
implementations, but 
supply valuable tidbits 
along the way.” 

— Danny Goodman, 
Author of the 
JavaScript Bible 
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Elisabeth Robson know 
that real education is 
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experience. With, its 
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analogical descriptions, 
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print-based knowledge 
sharing to a whole 
new level!” 
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getting t9 know HTML5 

Welcome to Webville 

HTML has been on a wild ride. Sure, HTML started as a mere 
markup language, but more recently HTML’s put on some major muscle. 

Now we’ve got a language tuned for building true web applications with local 
storage, 2D drawing, offline support, sockets and threads, and more. The 
story of HTML wasn’t always pretty, and it’s full of drama (we’ll get to all that), 
but in this chapter, we’re first going to go on a quick joyride through Webville 
to get sense for everything that goes into “HTML5 ■” Come on, hop in, we’re 
headed to Webville, and we’re going to start by going from zero to HTML5 in 
3.8 pages (flat). 
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introducing JavaScript and the DOM 

A Little Code 

JavaScript is going to take you to new places. You already 

know all about HTML markup (otherwise known as structure) and you know 
all about CSS style (otherwise known as presentation), but what you’ve been 
missing is JavaScript (otherwise known as behavior). If all you know about are 
structure and presentation, sure, you can create some great-looking pages, 
but they're still just pages. When you add behavior with JavaScript, you can 
create an interactive experience; or, even better, you can create full blown web 
applications. Get ready to add the most interesting and versatile skill in your 
web toolkit: JavaScript and programming! 
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events, liandlers and all that jazz 



A Little Interactivity 

You still haven’t reached out to touch your user. 

You’ve learned the basics of JavaScript but can you get interactive with 
your users? When pages respond to user input, they aren’t just documents 
anymore, they’re living, reacting applications. In this chapter you’re going 
to learn how to handle one form of user input (excuse the pun), and wire 
up an old-fashioned HTML <form> element to actual code. It might sound 
dangerous, but it’s also powerful. Strap yourself in, this is a fast moving 
to-the-point-chapter where we go from zero to interactive app in no time. 
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jaVascrlpt foncti9ns and objects 


Serious JavaScript 

Can you call yourself a scripter yet? Probably—you already 

know your way around a lot of JavaScript, but who wants to be a scripter when 
you can be a programmer? It’s time to get serious and take it up a notch — it’s 
time you learn about functions and objects. They’re the key to writing code 
that is more powerful, better organized and more maintainable. They’re also 
heavily used across HTML5 JavaScript APIs, so the better you understand 
them the faster you can jump into a new API and start ruling with it. Strap in, 
this chapter is going to require your undivided attention... 


Expanding your vocabulary 
How to add your own functions 
How a function works 
Anatomy of a Function 
Local and Global Variables 

Knowing the scope of your local and global variables 
Oh, did we mention functions are also values? 

Did someone say “Objects ”？！ 

How to create an object in JavaScript 
Some things you can do with objects 
Let’s talk about passing objects to functions 
Objects can have behavior too... 

Meanwhile back at Webville Cinema... 

Adding the “this” keyword 
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How does this really work? 
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making your html hcctdon aware 


.vrir 7 ] Geolocation 

Wherever you go, there you are. And sometimes knowing where you are 
makes all the difference (especially to a web app). In this chapter we’re going to show 
you how to create web pages that are location aware — sometimes you’ll be able to 
pin point your users down to the corner they’re standing on, and sometimes you’ll only 
be able to determine the area of town they’re in (but you’ll still know the town!). Heck, 
sometimes you won’t be able to determine anything about their location, which could be 
for technical reasons, or just because they don’t want you being so nosy. Go figure. In 



any case, in this chapter we’re going to explore a JavaScript API: Geolocation. Grab the 
best location-aware device you have (even if it’s your desktop PC), and let’s get started. 



Location, Location, Location 
The Lat and Long of it... 

How the Geolocation API determines your location 
Just where are you anyway? 

How it all fits together 
Revealing our secret location... 

Writing the code to find the distance 
How to add a Map to your Page 
Sticking a Pin in it... 

The other cool things you can do with the Google Maps API 
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xtroverted Apps 

ou’ve been sitting in your page for too long, it s time to get 

out a little, to talk to web services, to gather data and to bring it all back so you 
n build better experiences mixing all that great data together. That's a big part of 


writing modern HTML5 applications, but to do that you’ve got to know how to talk to 
web services. In this chapter we're going to do just that, and incorporate some data 
from a real web service right in your page. And, after you've learned how to do that 
you'll be able to reach out and touch any web service you want. We’ll even fill you 
in on the hippest new lingo you should use when talking to web services. So, come 



,you’re going to use some more APIs, the communications APIs. 


Mighty Gumball wants a Web app 


A little more background on Mighty Gumball 


So how do we make requests to web services? 


How to make a request from JavaScript 


Move over XML, meet JSON 


Writing an onload handler function 
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How to set up your own Web Server 
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Reworking our code to make use of JSON 
Moving to the Live Server 
It’s a cliffhanger! 


Remember, we left you with a clifllianger? A bug. 
What Browser Security Policy? 

So, what are our options? 
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But what is the “P” in JSONP for? 



Let’s update the Mighty Gumball web app 
Step 1: Taking care of the script element... 
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bringing out y^ur inner artist 

The Canvas 

HTML’s been liberated from being just a “markup” language, with 

HTML5’s new canvas element you’ve got the power to create, manipulate and destroy pixels, 
right in your own hands. In this chapter we'll use the canvas element to bring out your inner 
artist — no more talk about HTML being all semantics and no presentation; with canvas we're 
going to paint and draw with color. Now it's all about presentation. Well tackle how to place a 
canvas in your pages, how to draw text and graphics (using JavaScript of course), and even 
how to handle browsers that don't support the canvas element. And canvas isn't just a one-hit 
wonder; you're going to be seeing a lot more of canvas in other chapters in this book. 
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Our new startup: TweetShirt 282 
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How to get a canvas into your web page 286 
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not your s tV 

Video... with special guest star ^‘Canvas’’ 

We don’t need no plug-in. After all, video is now a first-class member of the HTML 
family — just throw a <video> element in your page and you’ve got instant video, even across 
most devices. But video is far more than just an element, it’s also a JavaScript API that allows 
us to control playback, create our own custom video interfaces and integrate video with the 
rest of HTML in totally new ways. Speaking of integration... remember there’s that video and 
canvas connection we’ve been talking about — you’re going to see that putting video and 
canvas together gives us a powerful new way to process video in real time. In this chapter 
we’re going to start by getting video up and running in a page and then we’ll put the JavaScript 
API through its paces. Come on, you’re going to be amazed what you can do with a little 
markup, JavaScript and video & canvas. 



Meet Webville TV 350 
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string things loccdly 

Web Storage 

Tired of stuffing your client data into that tiny closet 

COOkie? That was fun in the 90s, but we’ve got much bigger needs today 
with web apps. What if we said we could get you five megabytes on every user’s 
browser? You’d probably look at us like we were trying to sell you a bridge in 
Brooklyn. Well, there’s no need to be skeptical — the HTML5 Web storage API 
does just that! In this chapter we’re going to take you through everything you 
need to store any object locally on your user’s device and to make use of it in 
your web experience. 
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Its hard to manage my ) 
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of these stickies after I’m done 
with them. Can you add a delete 
function? 
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Now let’s add the JavaScript 
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Web Workers 

Slow script — do you want to continue running it? if youve spent 

enough time with JavaScript or browsing the web you’ve probably seen the “slow script” 
message. And, with all those multicore processors sitting in your new machine how could 
a script be running too slow? It's because JavaScript can only do one thing at a time. But, 
with HTML5 and Web Workers, all that changes. You’ve now got the ability to spawn your 
own JavaScript workers to get more work done. Whether you’re just trying to design a 
more responsive app, or you just want to max out your machine’s CPU, Web Workers are 
here to help. Put your JavaScript manager’s hat on, let’s get some workers cracking! 
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appendix ： leftovers 


We covered a lot of ground, and 
you’re almost finished with this book. 

We’ll miss you, but before we let you go, we wouldn’t 
feel right about sending you out into the world 
without a little more preparation. We can’t possibly fit 
everything you’ll need to know into this relatively small 
chapter. Actually, we did originally include everything 
you need to know about HTML5 (not already covered 
by the other chapters), by reducing the type point size 
to .00004. It all fit, but nobody could read it. So, we 
threw most of it away, and kept the best bits for this 
Top Ten appendix. 
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how to use this book 


Who is this book for? 

If you can answer “yes” to all of these: 

/CfN Do you have a computer with a web browser and a 
test editor? 

Do you want to learn, understand, remember, and 
create web applications using the best techniques and 
most recent standards? 

/^\ Do you prefer stimulating dinner party conversation 
to dry, dull, academic lectures? 

this book is for you. 


Who should probably back away from this book? 

If you can answer “yes” to any of these: 

CKc^k ou-t Head Fwrsi HTML 

® Are you completely new to writing web pages? 产 / 8 仏 CSf ahd XWT/VJL -Pov- ar 

dcvclopnr»Cht ; ahd thch Covnc 

(2) Are you already developing web apps and looking for a 3hd joih us. 

reference book on HTML5? 


Are you afraid to try something different? Would 
you rather have a root canal than mix stripes with 
plaid? Do you believe that a technical book can’t 
be serious if cheesy 50’s educational films and 
anthropomorphized JavaScript APIs are in it? 


this book is not for you. 


心。啪 ^airkc-tihg ： -this book is 

a^yohc with a Cash 

,s "too - BdJ 
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the intro 


Wc know what youVe thinking. 


“How can this be a serious HTML5 programming book?” 


“What’s with all the graphics?” 

“Can I actually learn it this way?” 

And we know what your brain is thmkmg. 







Your brain craves novelty. It’s always searching, scanning, waiting for something 
unusual. It was built that way, and it helps you stay alive. 


So what does your brain do with all the routine, ordinary, normal things 
you encounter? Everything it can to stop them from interfering with the 
brain’s real]oh — recording things that matter. It doesn’t bother saving 
the boring things; they never make it past the “this is obviously not 
important” filter. 


And there’s no simple way to tell your brain, “Hey brain, thank you 
very much, but no matter how dull this book is, and how little I’m 
registering on the emotional Richter scale right now, I really do want 
you to keep this stuff around.” 


How does your brain know what’s important? Suppose you’re out for 
a day hike and a tiger jumps in front of you. What happens inside your 
head and body? 


Great. Only 
640 more dull, 
dry, boring pages. 


Just one problem. Your brain’s trying to do you a big favor. It’s trying to 
make sure that this obviously non-important content doesn’t clutter up scarce 
resources. Resources that are better spent storing the really big things. Like 
tigers. Like the danger of fire. Like how you should never again 
snowboard in shorts. 


Neurons fire. Emotions crank up. Chemicals surge. 


And that’s how your brain knows... 


This must be important! Don’t forget it! 

But imagine you’re at home, or in a library. It’s a safe, warm, tiger-free zone. 
You’re studying. Getting ready for an exam. Or trying to learn some tough 
technical topic your boss thinks will take a week, ten days at the most. 


/ wa'^ 办 # 
sa^- 
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Some of the Head First learning principles 


Make it visual, images are far more memorable than words 
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problems related to the content. 

Use a conversational and personalized style-In 
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Metacognition: thinking about thinking 


If you really want to learn, and you want to learn more quickly and more deeply, 
pay attention to how you pay attention. Think about how you think. Learn how you 
learn. 

Most of us did not take courses on metacognition or learning theory when we were 
growing up. We were expected to learn, but rarely taught to learn. 


I wonder how I 
can trick my brain 
into remembering 
this stuff... 



So just how DO you get your brain to think that 
HTIVIL5 (and JavaScript) is a hungry tiger? 


There’s the slow, tedious way, or the faster, more effective way. The slow 
way is about sheer repetition. You obviously know that you are able to learn and 
remember even the dullest of topics if you keep pounding the same thing into your brain. 
With enough repetition, your brain says, “This doesn’t feel important to him, but he keeps 
looking at the same thing over and over and over, so I suppose it must be.” 


But we assume that if you’re holding this book, you really want to learn about 
iPhone development. And you probably don’t want to spend a lot of time. And since 
you’re going to build more apps in the future, you need to remember what you read. 
And for that, you’ve got to understand it. To get the most from this book, or any book 
or learning experience, take responsibility for your brain. Your brain on this content. 


The trick is to get your brain to see the new material you’re learning as 
Really Important. Crucial to your well-being. As important as a tiger. 
Otherwise, you’re in for a constant battle, with your brain doing its best to 
keep the new content from sticking. 


The faster way is to do anything that increases brain activity, especially different 
types of brain activity. The things on the previous page are a big part of the solution, 
and they’re all things that have been proven to help your brain work in your favor. For 
example, studies show that putting words within the pictures they describe (as opposed to 
somewhere else in the page, like a caption or in the body text) causes your brain to try to 
makes sense of how the words and picture relate, and this causes more neurons to fire. 
More neurons firing = more chances for your brain to get that this is something worth 
paying attention to, and possibly recording. 


A conversational style helps because people tend to pay more attention when they 
perceive that they’re in a conversation, since they’re expected to follow along and hold up 
their end. The amazing thing is, your brain doesn’t necessarily care that the “conversation” 
is between you and a book! On the other hand, if the writing style is formal and dry, your 
brain perceives it the same way you experience being lectured to while sitting in a roomful 
of passive attendees. No need to stay awake. 


But pictures and conversational style are just the beginning. 
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Here's what WE did: 


We used pictures^ because your brain is tuned for visuals, not text. As far as your brain’s 
concerned, a picture really is worth a thousand words. And when text and pictures work 
together, we embedded the text in the pictures because your brain works more effectively 
when the text is within the thing the text refers to, as opposed to in a caption or buried in 
the text somewhere. 



We used redundancy^ saying the same thing in different ways and with different media 
types, and multiple senses, to increase the chance that the content gets coded into more than 
one area of your brain. 

We used concepts and pictures in unexpected ways because your brain is tuned for 
novelty, and we used pictures and ideas with at least some emotional content, because your 
brain is tuned to pay attention to the biochemistry of emotions. That which causes you to 
feel something is more likely to be remembered, even if that feeling is nothing more than a 

little humor, surprise : or interest. 



BEAe Browser 


We used a personalized, conversational style, because your brain is tuned to pay more 
attention when it believes you’re in a conversation than if it thinks you’re passively listening 
to a presentation. Your brain does this even when you’re reading. 

We included loads of activities, because your brain is tuned to learn and remember 
more when you do things than when you read about things. And we made the exercises 
challenging-yet-do-able, because that’s what most people prefer. 



We used multiple learning styles, because might prefer step-by-step procedures, 
while someone else wants to understand the big picture first, and someone else just wants 
to see an example. But regardless of your own learning preference, everyone benefits from 
seeing the same content represented in multiple ways. 


We include content for both sides of your brain, because the more of your brain 
you engage, the more likely you are to learn and remember, and the longer you can stay 
focused. Since working one side of the brain often means giving the other side a chance to 
rest, you can be more productive at learning for a longer period of time. 

And we included stories and exercises that present more than one point of view, 
because your brain is tuned to learn more deeply when it’s forced to make evaluations and 
judgments. 

We included challenges, with exercises, and by asking questions that don’t always have 
a straight answer, because your brain is tuned to learn and remember when it has to work 
at something. Think about it — you can’t get your body in shape just by watching people at 
the gym. But we did our best to make sure that when you’re working hard, it’s on the right 
things. Thsit you y re not spending one extra dendrite processing a hard-to-understand 
example, or parsing difficult, jargon-laden, or overly terse text. 

We people. In stories, examples, pictures, etc., because, well, because j ⑽ Ye a person. 
And your brain pays more attention to people than it does to things. 


Puzzles 
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Here's what YOU caw do to bend 
your brain into submission 

So, we did our part. The rest is up to you. These tips are a 
starting point; listen to your brain and figure out what works 
for you and what doesn’t. Try new things. 

Cui ihis si^k a 

伽 youir 


^T) Slow down. The more you understand, 
the less you have to memorize. 

Don’t just read. Stop and think. When the 
book asks you a question, don’t just skip to the 
answer. Imagine that someone really is asking 
the question. The more deeply you force your 
brain to think, the better chance you have of 
learning and remembering. 

( 2 ) Do the exercises. Write your own notes. 

We put them in, but if we did them for you, 
that would be like having someone else do 
your workouts for you. And don’t just look at 
the exercises. Use a pencil. There’s plenty of 
evidence that physical activity while learning 
can increase the learning. 

^3) Read the “There are No Dumb Questions” 

That means all of them. They’re not optional 
sidebars — they We part of the core content! 

Don’t skip them. 

(4) Make this the last thing you read before 
bed. Or at least the last challenging thing. 

Part of the learning (especially the transfer to 
long-term memory) happens after you put the 
book down. Your brain needs time on its own, to 
do more processing. If you put in something new 
during that processing time, some of what you 
just learned will be lost. 

( 5 ^ Drink water. Lots of it. 

Your brain works best in a nice bath of fluid. 
Dehydration (which can happen before you ever 
feel thirsty) decreases cognitive function. 


Talk about it. Out loud. 

Speaking activates a different part of the brain. 

If you’re trying to understand something, or 
increase your chance of remembering it later, say 
it out loud. Better still, try to explain it out loud 
to someone else. You’ll learn more quickly, and 
you might uncover ideas you hadn’t known were 
there when you were reading about it. 

^7) Listen to your brain. 

Pay attention to whether your brain is getting 
overloaded. If you find yourself starting to skim 
the surface or forget what you just read, it’s time 
for a break. Once you go past a certain point, you 
won’t learn faster by trying to shove more in, and 
you might even hurt the process. 

( 8 ) Feel something! 

Your brain needs to know that this matters. Get 
involved with the stories. Make up your own 
captions for the photos. Groaning over a bad joke 
is still better than feeling nothing at all. 

Create something! 

Apply this to your daily work; use what you are 
learning to make decisions on your projects. Just 
do something to get some experience beyond the 
exercises and activities in this book. All you need is 
a pencil and a problem to solve... a problem that 
might benefit from using the tools and techniques 
you’re studying for the exam. 
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Read me 

This is a learning experience, not a reference book. We deliberately stripped out everything that 
might get in the way of learning whatever it is we’re working on at that point in the book. And 
the first time through, you need to begin at the beginning, because the book makes assumptions 
about what you’ve already seen and learned. 

We expect you to know HTML and CSS. 

If you don’t know HTML markup (that is, all about HTML documents including elements, 
attributes, property structure, structure versus presentation), then pick up a copy of Head First 
HTML with CSS & XHTML before starting this book. Otherwise, you should be good to go. 

Some experience helps, but we don’t expect you to know JavaScript. 

If you’ve got any programming or scripting in your background (even if it isn’t JavaScript), it’s 
going to help you. But, we don’t expect you to know Java Script going into this book; in fact, this 
book is designed to follow Head First HTML with CSS & XHTML, which has no scripting in it. 

We encourage you to use more than one browser with this book. 

We encourage you to test the pages and web applications in this book with several browsers. 
This will give you experience in seeing the differences among browsers and in creating pages 
that work well in a variety of browsers. We most highly recommend Google Chrome and 
Apple Safari for use with this book as they are, in general, the most up-to-date with the current 
standards. But we do recommend you also try the most recent versions of the other major 
browsers including Internet Explorer, Firefox and Opera, as well as mobile browsers on devices 
with iOS and Android. 

The activities are NOT optional. 

The exercises and activities are not add-ons; they’re part of the core content of the book. Some 
of them are to help with memory, some are for understanding, and some will help you apply 
what you’ve learned. Don } t skip the exercises. Even crossword puzzles are important — 
they’ll help get concepts into your brain. But more importantly, they’re good for giving your 
brain a chance to think about the words and terms you’ve been learning in a different context. 

The redundancy is intentional and important. 

One distinct difference in a Head First book is that we want you to really get it. And we want 
you to finish the book remembering what you’ve learned. Most reference books don’t have 
retention and recall as a goal, but this book is about learning, so you’ll see some of the same 
concepts come up more than once. 

The Brain Power exercises don’t have answers. 

For some of them, there is no right answer, and for others, part of the learning experience of 
the Brain Power activities is for you to decide if and when your answers are right. In some of 
the Brain Power exercises, you will find hints to point you in the right direction. 
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Software requirements 

To write HTML5 and JavaScript code, you need a text editor, a browser, and, 
sometimes, a web server (it can be locally hosted on your personal desktop). 

The text editors we recommend for Windows are PSPad, TextPad or EditPlus (but 
you can use Notepad if you have to). The text editors we recommend for Mac are 
TextWrangler, TextMate or TextEdit. If you’re on a Linux system, you’ve got plenty of 
text editors built in, and we trust you don’t need us to tell you about them. 

We hope you’ve got the browser bit covered and have installed at least two browsers 
(see the previous page). If not, do it now. It’s also worth your time to learn how to use 
the browser developer tools; each of the major browsers has built-in tools you can use 
to inspect the JavaScript console (you can see errors as well as output you display using 
console . log, a handy alternative to alert), web storage usage, the DOM, CSS 
style that’s been applied to elements, and much much more. Some browsers even 
have plug-ins for additional developer tools. You don’t need the developer tools to 
get through the book, but if you’re willing to spend the time to investigate how to use 
these, it will make development easier. 

Some HTML5 features and JavaScript APIs require that you serve files from a real 
web server rather than by loading a file (i.e., your URL will start with http : // 
rather than file : //). We’ve identified which examples you’ll need a server for in the 
appropriate places in the book, but if you’re motivated, we recommend you go ahead 
and install a server on your computer now. For Mac and Linux, Apache comes built-in, 
so you’ll just need to make sure you know how to access it and where to put your 
files so you can serve them using your local server. For Windows, you’ll need to install 
Apache or IIS; if you go the Apache route, there are plenty of open source tools like 
WAMP and XAMPP that are fairly easy to install. 


That’s it! Have fun... 
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O’Reilly Media has uploaded this book to the Safari Books Online service. To have full digital 
access to this book and others on similar topics from O’Reilly and other publishers, sign up for 
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Welcome to Webville ♦ 



Were going to Webville! There's 
so much great HTML5 construction going 
on, wed be crazy to live anywhere else. 
Come on, follow us, and well point out all 
4 the new sights on the way. 卜 




炎 : 




HTML has been on a wild ride. Sure, html started 

Heads up ： 
received a 
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through Webville to get sense for everything that goes into 
“HTML5 ■” Come on, hop in, we’re headed to Webville, and we’re 
going to start by going from zero to HTML5 in 3.8 pages (flat). 



as a mere markup language, but more recently HTML’s put 
on some major muscle. Now we’ve got a language tuned for 
building true web applications with local storage, 2D drawing, 
offline support, sockets and threads, and more. The story of 
HTML wasn’t always pretty, and it’s full of drama (we’ll get to all 
that), but in this chapter, we’re first going to go on a quick joyride 


this is a new chapter 
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conversation and a gain© Q3 ： two of Tap Tap Revolution^ ^ ^ 

i|g ： i ；； ll ；； lwIreless ；： aGcess ； ： ： is ：； always ： ^ 

.</p> ；. 

</body> 

Look how easy it is to write HTML5 

: 5 ur =r; 
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getting to know HTML5 


i^harpen your pencil 


After taking a careful look at the HTML on the page 2, can you see any markup that 
might change with HTML5? Or that you’d want to change? We’ll point out one for you: 
the doc type definition: 


TW»s \s 


V : 紋广 ’’ 



Tills jus 七 mcair\s 
七 Wis s-ta^dav-d is 
fublidy available. 


This pa\rb says wcVc us*mj HTML 
version 午 .01 *tha*t this 

markup is w\ri*btc 的 m fl^lislv 



<!DOCTYPE html PUBLIC ， ▼- //W3C//DTD HTML 4.01//EN n 


"http : //www.w3.org/TR/html4/strict.dtd M > 


This fo*m*b -to a -Pile 
idc^*ti-Pics -this s-bd^ddvd- 



Remember, the doc type definition belongs at the top of your HTML file and tells the 
browser the type of your document, in this case, HTML 4.01. By using a doctype the browser 
is able to be more precise in the way it interprets and renders your pages. Using a doctype is 
highly recommended. 

So, using your deductive powers, what do you think the doctype definition for HTML5 will 
look like? Write it here (you can refer back to your answer when we cover this in a bit): 


夕 

Youv yes 
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update your html 


I 顺 “ing . (HML5 - o—Ha+f^ 晰 y_ H 爾 l tW 



Step I is going to amaze you: follow along, we’re going to start at the top of 
the Head First Lounge HTML and update the doctype to give it that new 
HTML5 shine. 

Here’s the old HTML 4.01 version of the doctype: 

<!DOCTYPE html PUBLIC ， ▼- "W3C//DTD HTML 4.01//EN" 

"http : //www.w3.org/TR/html4/strict.dtd n > 

Now you might have guessed that we’re going to replace every mention of 
“4” with “5” in the doctype, right? Oh, no. Here’s the amazing part: the new 
doctype for HTML5 is simply: 

<!doctype html> 

No more Googling to remember what the doctype looks like, or copying and 
pasting from another file, this doctype is so simple you can just remember it. 

But, wait, there’s more... 

Not only is this the doctype for HTML5, it’s the doctype for every future 
version of HTML In other words, it’s never going to change again. Not only 
that, it will work in your older browsers too. 


Av°'°y cs . 

vcwcwbcv 、七 . 


〜 S 部， &e(S) 







If you’re a fan of the Extreme Makeovers or The Biggest Loser television 
shows, you’re going to love Step 2. In this step we have the content meta 
tag... here, check out the before/after pictures: 


<meta http-equiv= n content-type n content: n text/html; charset=UTF-8 n > 

[_ 喊 0 呔 (_ L W 


<meta charset= M utf-8"> 


价 r&R 


Yes, the new meta tag has lost a ： 4©t-©f-we4gbt is much simpler.When you 
specify the meta tag in HTML5, just supply the tag along with a character 
encoding. Believe it or not, all browsers (old and new) already understand this 
meta description, so you can use it on any page and it just works. 
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getting to know HTML5 



And now for Step 3, the step that brings it all home. Here we’re also going 
to focus on the <head> element and upgrade the link tag. Here’s what we 
have now: a link of type text/css that points to a stylesheet: 


<link type= M text/css" rel= n stylesheet" href="lounge.css M > 

To upgrade this for HTML5, we just need to remove the type attribute.Why? 
Because CSS has been declared the standard, and default, style for HTML5. So, 
after we remove the type attribute, the new link looks like this: 



Old skoo\ 


<link rel= n stylesheet M href= n lounge.css n > 





And, because you acted fast, we’ve got a special bonus for you. We’re going 
to make your life even easier by simplifying the script tag.With HTML5, 

JavaScript is now the standard and default scripting language, so you can 

remove the type attribute from your script tags too. Here’s what the new 

script tag looks like without the type attribute: i-f you do^-t k^ov/ 

〈script src= n lounge. js n X/script> ^~ ^ ^ sdvip-t taj yet, 

wc II get 七 hen. 

Or if you have some inline code, you can just write your script like this: 

<script> 


var youRock = true; 匕飞 
</script> 


AW 




Well "tdlk rwolrc 
aboui JavaSdv-ipi 
•m a bit 



Congratulations, you're now certified 
to upgrade any HTML to HTML5! 

As a trained HTML5-o-Matic user, you’ve got 
the tools you need to take any valid HTML page 
and to update it to HTML5. Now it’s time to put your 

certification into practice! 
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beyond markup 


Wait a sec t all 
this fuss about HTML5 
and this is all I needed to 
do? What is the rest of 
this book about? 


Okay ， okay，you got US. So far, we’ve been talking 
about updating your older HTML pages so that they’re 
ready to take advantage of everything HTML5 has to 
offer. And as you can see, if you’re familiar with HTML 
4.01, then you’re in great shape because HTML5 is a 
superset of HTML 4.01 (meaning practically everything 
in it is still supported in HTML5) and all you need to do 
is know how to specify your doctype and the rest of the 
tags in the <head> element to get started with HTML5. 

But, you’re right, we were being silly, of course there 
is more to HTML5 than just updating a few elements. 

In fact, what everyone is excited about is the ability to 
build rich, interactive pages (or even sophisticated web 
applications), and to support that HTML5 provides a 
whole family of technologies that works hand in hand 
with the HTML5 markup language. 

But hang on; before we get there we’ve got just a bit more 
work to do to make sure we’re ready with our markup. 
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i^harpen your pencil 


You’re closer to HTML5 markup than you think! 


Here’s some old skool HTML that needs updating. Work through the HTML5-o-Matic 
process and update this HTML to HTML5. Go ahead and scribble in the book, scratch 
out the existing markup code, and add any new markup code you need to. We’ve 
helped a little by highlighting the areas that need to change. 


When you’re done, type it in (or grab the exercise files and make your changes if you 
prefer), load this in your browser, sit back and enjoy your first HTML5. Oh, and you’ll 
find our answers on the next page. 


^ To do^vAoad all ike CoAt a^A sample -f iles (or 七 his book, 
please Visit 


<!DOCTYPE html PUBLIC ， ▼- //W3C//DTD HTML 4.01//EN" 

"http : //www.w3.org/TR/html4/strict.dtd"> 

<html> 

<head> 

<title>Head First Lounge</title> 

<meta http-equiv= n content-type M content= n text/html; charset=UTF-8 M > 

<link type= n text/css n rel= M stylesheet" href= M lounge.css n > 

<script type="text/javascript" src="lounge. js n X/script> 

</head> 

<body> 

<hl>Welcome to Head First Lounge</hl> 

<p> 

<img src= n drinks.gif" alt= M Drinks M > 

</p> 

<p> 

Join us any evening for refreshing <a href= n elixirs.html n >elixirs</a>, 
conversation and maybe a game or two of Tap Tap Revolution. 

Wireless access is always provided; BYOWS (Bring Your Own Web Server). 

</p> 

</body> 

</html> 
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exercise solution 


i^harpen your pencil 


You’re closer to HTML5 markup than you think! 

Here’s some old skool HTML that needs updating. Work through the 
HTML5-o-Matic process and update this HTML to HTML5. Go ahead and 
scribble in the book, scratch out the existing markup code, and add any 
new markup code you need to. We’ve helped a little by highlighting the 
areas that need to change. 


Here’s our solution. 


Here’s the updated code: 

<M 咖 hw> 么 一 Thc 

<html> 

<head> 

<title>Head First Lounge</title> 



Hcv-c av-c -fouv- 
I'mes v/e "to 

make our Head fVs 七 


orally 


dharse 七二 Vbf - 0 ”> - meta tag … 

<lihk hvrf 二 1 'louhy. 6 ss”> ^ ... ihc Tmk tag … 

<sd\rif 七 s\rd 二％ uhyjs’W str\^i> <3^ … 扣 d sdripi tag. 

</head> 

<body> 

<hl>Welcome to Head First Lounge</hl> 

<p> 

<img src="drinks.gif" alt= n Drinks M > 

</p> 

<P> 

Join us any evening for refreshing <a href= n elixirs.html n >elixirs</a>, 
conversation and maybe a game or two of Tap Tap Revolution. 

Wireless access is always provided; BYOWS (Bring Your Own Web Server). 

</p> 

</body> 

</html> 


t>o^i believe us? Try 

hUp ： //validaW.w?.ov 9 / 

ahd you'll see - it validates 
as WT/V\L^ Fo^ ^a\l 
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there^ctre no ^ 

Dumb Questi9ns 


How does this work on the old browsers? Like the new 
doctype, meta, and so on... somehow the older browsers work 
with this new syntax? 

Yes, through a bit of cleverness and luck. Take the type 
attributes on the link and script tags; now, it makes sense to get rid 
of this attribute with HTML5 because CSS and JavaScript are now 
the standards (and certainly are the default technologies for style 
and scripting). But as it turns out, the browsers already assumed 
the defaults of CSS and JavaScript. So the stars aligned and the 
new markup standard just happens to have been supported in the 
browser for years. The same is true of the doctype and the meta 
tag. 

What about the new doctype, it seems too simple now; it 
doesn’t even have a version or DTD. 

Yes, it does seem a little magical that after years of using 
complex doctypes we can now just simplify it to “weYe using HTML” 
Here’s what happened: HTML used to be based on a standard 
called SGML, and that standard required both the complex form 
of the doctype and the DTD. The new standard has moved away 
from SGML as a way to simplify HTML language and make it more 
flexible. So, we don’t need the complex form anymore. Further, as 
we said above, there is some luck here in that almost all browsers 
just look for HTML in the doctype to ensure they are parsing an 
HTML document. 

Were you joking about it never changing again? I 
thought the versioning was really important for browsers. Why 
not use <! doctype htmi5>? Ifs not like there isn^ going to 
be an HTML6 too. Right? 

The use of the doctype evolved with browser makers using 
the doctype to tell their browsers to render things in their own 
“standards mode.” Now that we have much more of a true standard, 
the HTML5 doctype tells any browser that this document is 
standard HTML, be that version 5, 6 or whatever. 

Well, I assume different browsers are going to have 
different capabilities at any one time. How do I handle that? 


True, especially until HTML5 is 100 percent supported. We’ll 
cover both of these points in the chapter and throughout the book. 

Why does this even matter? I just typed a page in 
without a doctype and meta tag and it worked just fine. Why do 
I need to worry if this stuff is totally correct? 

Yes, browsers are great at overlooking small errors in HTML 
files. But by including the correct doctype and meta tags, you’ll 
make sure browsers know exactly what you want, rather than 
having to guess. Plus, for people using older browsers, the new 
doctype means they’ll use standards mode, which is what you want. 
Remember, standards mode is a mode where the browser assumes 
you’re writing HTML that conforms to a standard, so it uses those 
rules to interpret your page. If you don’t specify a doctype, some 
browsers may go into “quirks mode” and assume your web page 
is written for older browsers, when the standard wasn’t quite up to 
snuff, and may interpret your page incorrectly (or assume it's just 
written incorrectly). 

Whatever happened to XHTML? It seems like a few years 
ago that was the future. 

A* Yeah it was. Then flexibility won out over strict syntax, and in 
the process XHTML (XHTML 2, to be precise) died and HTML5 was 
born to be more accepting of the way people write web pages (and 
the way browsers render them). That said, don’t worry, because 
knowing about XHTML is only going to make you a stronger author 
of HTML5 content (and you’re going to appreciate HTML5 a whole 
lot more). And by the way, if you really love XML, there’s still a way 
to write your HTML5 in strict form. More on that later... 

Qj What is UTF-8? 

UTF-8 is a character coding that has support for many 
alphabets, including non-western ones. You’ve probably seen other 
character sets used in the past, but UTF-8 is being promoted as the 
new standard. And it’s way shorter and easier to remember than 
previous character encodings. 
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what you should know 


o 



We don’t expect you to know HTML5, yet. 


If you’ve never had exposure to HTML5 before, 
that’s okay, but you should have worked with HTML, 
and there are some basics you should know about 
like elements, tags, attributes, nesting, the difference 
between semantic markup and adding style, and so on. 


If you aren’t familiar with all these, we’re going to 
make a small suggestion (and a shameless plug): there’s 
another book that proceeds this one, Head First HTML 
with CSS & XHTML, and you should read it. And if 
you’re somewhat familar with markup languages, you 
might want to skim it or use it as a reference while 
reading this book. 



Wlc'vc also pui a small guide -to 
ttTAIL^ rw3\rkup f CSS3 m 七 he 

I-P you jus-t v/dhi d、uidk 
overview o( ihc hew additions, 

have a ^uidk mead ovcv -them a-t 

"the tv\d or the book- 
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This week’s interview: 

Confessions of the newest version of HTML 


Head First ： Welcome, HTML5. All the Web is buzzing about you. To us, you look a lot like HTML 
4. Why is everyone so excited? 

HTML5: Everyone’s excited because I’m enabling a whole new generation of web applications and 
experiences. 

Head First ： Right, but again, why didn’t HTML 4 or even the promise of “XHTML” do that? 

HTML5 ： XHTML 2 was a dead-end. Everyone who wrote real web pages hated it. XHTML 
reinvented the way we write markup for a web page, and would have made all the pages already out 
there obsolete. I said, “Hey, wait a sec, I can do new things and embrace everything that is already out 
there.” I mean, if something works, why reinvent the wheel? That’s my philosophy. 

Head First ： It seems to be working. But you know, some of the standards guys are still saying that the 
Web would be better off following their “pure” standards. 

HTML5: You know, I don’t really care. I listen to the people out there writing real web pages — how are 
they using me, and how can I help? Second on my list are the developers creating the web browsers. 
And last on my list are the standards guys. I’ll listen to them, but not if it disagrees with what real users 
are doing. 

Head First: Why not? 

HTML5 ： Because if the users and the browser-makers disagree with the standards guys, it is a moot 
point. Luckily the people working on the HTML5 spec totally agree with me, and that’s our philosophy. 

Head First ： Back to the previous version of HTML, you’ve said you are a superset of HTML 4.01. 
That means you’re backward-compatible, right? Does that mean you’re going to have to keep handling 
all the bad designs of the past? 

HTML5:Ip romise I’ll do my best to handle anything from the past that is thrown at me. That said, 
it doesn’t mean that is the way to treat me. I do want web page authors to be educated on the latest 
standard and use me in the best way possible. That way, they can really push me to my limits. But 
again, I won’t totally fail, and I will display an old page to the best of my ability if it’s not updated. 

Head First ： My next question is ... 

HTML5: Hold on, hold on!!! All these questions about the past. We aren’t talking about what is 
important here. As far as my markup is concerned, my personal mission is to embrace the Web as 
it is, add some new structured elements that make web author’s lives easier, and to help all browser 
implementors support consistent semantics around my markup. But I’m really here to pitch my new 
purpose: web applica... 

Head First: ...So sorry HTML5, that’s all we have time for. Thanks, and we’ll be sure to talk about 
anything you want in an upcoming interview. 

HTML5 ： Argh, I hate when that happens!!! 
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the html5 landscape 


Would the REAL HTML5 please stand up... 

Okay, you’ve patiently humored us by sitting through our “HTML5-o-Matic” skit, and 
we’re sure you’ve already guessed there’s a lot more to HTML5 than that. The word on the 
street is that HTML5 removes the need for plug-ins, can be used for everything from simple 
pages to Quake-style games and is a whipped topping for desserts. HTML5 seems to be 
something different to everyone... 




HTML5 is all about 
multimedia, getting rid of 
plug-ins and using the new 
native support for audio 
and video. 


Actually, ifs about rich Internet clients. Instead 
of building clients with plug-ins like Flash, now 
I can use canvas, transforms and JavaScript to 
make cool interfaces and animations. 
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The good news is, HTML5 is all these things. When people talk about 
HTML5 they mean a family of technologies that, when combined, gives 
you a whole new palette for building web pages and applications. 


The great thing about 
HTML5 is the client-side storage 
and caching functionality. Can you 
say offline access to the Web? 


Tm excited because 
I can use web workers 
to make my JavaScript more 
efficient and my page feel more 
responsive. 


There's also a 
ton of new stuff in 
CSS we can use with HTML5. 
Advanced selectors, animations, 
and yeah—drop shadows! 


DoiVt forget mobile. I 
want to be able to write 
web pages that know where 
I am. 
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how html5 works 


How HTML5 really works... 


So we’ve said HTML5 is made up of a family of technologies, but what 
does that mean? Well you already know there’s the HTML markup itself, 
which has been expanded to include some new elements; there are also 
lots of additions to CSS with GSS3 that give you even more power to 
style your pages. And then there’s the turbo charger: JavaScript, and a 
whole new set of JavaScript APIs that are available to you. 



YoJW -fmd a y\\u Wlcbvillc ^uidc b> 
七 he HTML 弓 md\rkup f CSS? 

p\ropc\rtics m ihc 


Let’s take a look behind the scenes and see how this all fits together: 


The browser loads a document, which 
includes markup written in HTML and 
style written in CSS. 


As the browser loads your page, it also creates 
an internal model of your document that 
contains all the elements of your HTML markup. 







1 

/V]avkupJ 


html 


body 


title 


script 


hi 


h2 


P 




丁 

em 




This is it jets 'm-tcv-cstmj ； 

(ov cadh youv- HTMU 

"the b\roy/sc\r dveates Bv\ object 
that vcpv-csc^ts i-t by\A plates it 
ih a *tv-cc—like s*bru 乙 "tuire v/i'th dll 
the othev- clcrwCJrrts … 


...wc tall *tWis bett 

potument 0\>]td Model OV 
POM -fov- short. You’ll 
be a lot mov-c o-f 

PCWl m tWis book because \i 

flays a vital vole m how we 
add behavior -to pays W\i\\ 
JavaS^v-'ift (well yt *to 七七 
s^ov-*tly> »y\ 2-)- 


The page’s siylc (i-f i-t has any) domes -fv-om 

CSS?, whidh has ]dccy\ expanded -Pvom CSSZ 

*t° i^ludc 匕 ommon idioms "that ^rt \v\ 

“se across -the Web (like drop shadows av\d 
Grounded tov-^cv* bo\rdcv-s). 


ia/, 4-^ ttTML^ i\\t markup V^as some *»mf\roVCmC^*b, as you VC 
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While the browser is loading your page 
it’s also loading your JavaScript code, 
which typically begins executing just 
after the page loads. 


Behind 
the Scenes 



个 Usihg you with youv 

P a 9 c b y WhipuW :叫 DOH io usc^ ov 

^ cvch-b, ov- make use o-f all 

tKc hCW APIs. 


JavaS 乙 rip 七 m-tev-adts y/i-th youv- 
pay -thv-oujh the POM- 


o 


The APIs give you access to audio, 
video, 2D drawing with the canvas, 
local storage and a bunch of other 
great technologies needed to build 
apps. And remember, to make use of 
all these APIs, we need JavaScript. 


APIs, otherwise khowh as 
Appli^-tioh Pirogv-ammihg 

expose a sc-t of 

objects, mc-thods, ahd pvopcv-tics 
tKat wc cav\ use -to aucss all 
"the -fuh^-tiohali-ty o( -these 
tc^hhologics. Wc\\ be dovehhQ 
Why J these APIs i h -this book. 


Jsn^Script APIs 




Offline 

Caching 
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html5 family members 


♦ 






J 






We’ve already talked about the “family of technologies” so much we feel like they’re, well, family. But then again we 
really haven’t gotten to know them yet, so isn’t it about time? You'll find most of the family below, so go ahead mingle, 
see if you can figure out who is who. We’ve gone ahead and figured one out for you. And don’t worry, we know this is 
your first time meeting the HTML5 family members, so the answers are at the end of the chapter. 


CSS3 


Using me, you can draw right on your web page. With me, you can 
draw text, images, lines, circles, rectangles, patterns and gradients. 
I’ll bring out your inner artist. 


Veb 



‘You might have used me in HTML 4 to enter information, but 
I’m even better in HTML5. I can require that you fill out fields, 
and I can more easily verify that you’ve typed an email, URL or 
phone number where you’re supposed to. 

You used to need a plug-in for us, but now we’re first class 
members of the HTML family of elements. Wanna watch or 
listen to something? You need us. 





We’re here to help with the structure and semantic meaning 
of your page, including new ways of making sections, headers, 
footers and navigation in your pages. 

I’m the most stylish one in the family. You’ve probably used me 
before, but did you know I can now animate your elements, give 
them great rounded corners and even drop shadows? 




Use me as a bit of local storage in every user’s browser. Need 
to store a few preferences, some shopping cart items, or maybe 
even stash a huge cache for efficiency? I’m your API. 


Need applications that work even when you aren’t connected to 
the network? I can help. 




I’m the API that can tell you where you are, and I play nice with 
Google maps. 

You’ll want me whenever you need several scripts running 
concurrently and in the background, so your user interface 
remains responsive. 
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YOUR MISSION... 

...should you choose to accept it, is to do some reconnaissance on all the HTML 
browsers. We’re sure you’ve heard some browsers are ready for HTML5, and some 
aren't. We need for you to get in close, because the truth is out there...__ 

T^^mission : mi ， SECRET 

娜 BR0WS ^ 

nr-lOTT. PUT ! 
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■s 

a) 
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Fitre£° x 


Safari 


Chrome 


iOS ar\d 
f\Y\&ro\d 
devices 
(dmoy\^ 

o 七 V^\rs) 


Mobile 

V^ebKi^ 


Opera 


IE 6 


IE 8 


XE 9 
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browser reconnaissance 


nST MISSION : 
y0UR 打 1 ^ c _ aISSA nce 


top svxjm 


browser 

SOLUTION 


A/ ) i»u^a-bcd or\ ouv av\sv/cvs av\d -f illed 'tV^cw' ^ 
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a) 

o 


to 

u 

a) 

节 

o 
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■s 

a) 
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Firef oX 


Safari 


Chrome 


Mobil e 

V^ebKi^ 


Opera 


XE 6 


/ 


IE 8 


IE 9 


Even though it will be a while before the standard gets signed, sealed and delivered, 
you’ll be using browsers that fully support HTML5 long before then. In fact, on 
modern browsers many features are already supported across the board. That’s why 
it’s a great idea to get started using HTML5 now. Plus if you start now, you’ll be 
able to impress your friends and coworkers with all your cutting edge knowledge. 

J\v\d that v-aisc sooner! 
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Wait a sec, if I start using HTML5 now, 
aren’t all those users of old browsers going to be 
alienated? Or, am I going to have to write two versions 
of my web page, one for browsers that support HTML5 
and one for older browsers? 


Hold on, take a deep breath. 

First of all HTML5 is a superset of HTML, and so 
your goal should be to write only one HTML page. 
You’re right in that the features supported by any 
one browser may differ, depending on how current 
the browser is, and how aggressive your users are in 
upgrading. So, we need to keep in mind that some 
of the newer features of HTML5 might not be 
supported, which leads back to your question of how 
to handle that. 

Now ，one of the design principles behind HTML5 
is to allow your pages to degrade gracefully — that 
means if your user’s browser doesn’t provide a 
new feature, then you should provide a meaningful 
alternative. In this book we’re going to show you how 
to write your pages to do that. 



But the good news is that all browsers are moving 
towards the HTML5 standard and related 
technologies (even the mobile browsers) and so over 
time graceful degradation will be more the exception 
than the rule (although you’ll always want to do what 
you can to give your users a meaningful experience no 
matter what browser they’re on). 
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there^cire 

)umb ( 


D 

I heard that the HTML5 Standard isn’t going to be a final 
recommendation until 2022! Is that true? And, if so, why are we 
bothering? 

The W3C is the standards body that formally recommends the 
HTML5 standard, and what you need to know about the W3C is that 
they are a conservative bunch, so conservative that they’d prefer 
to wait until a few generations of HTML5 browsers have come and 
gone before they give their signoff. That’s okay; the standard should 
be wrapped up in the next couple years and the browser makers 
are well on to their way to implementing it. So, yes, it may be quite 
a while before HTML5 is a “final recommendation," but it’s expected 
to be a stable standard by 2014, and for all practical purposes you 
should get going now on HTML5. 



esti9ns 


Chrome, Safari, Firefox, a zillion mobile browsers...isn^ 
the world just getting worse? How will we ever make sure our 
pages work on all these browsers? 

While there is plenty of healthy competition in the marketplace 
for browsers (desktop and mobile), in reality many of these browsers 
are based on a few common HTML engines. For instance Chrome, 
Safari and the mobile browsers in the Android and iPhone are all 
based on WebKit, an open source browser engine. So, for the most 
part, your pages will work out of the gate on multiple browsers 
without a lot of effort on your part. 




Why not just use Flash to solve cross-browser issues? 




What happens after HTML5 is final? 


HTML6? We have no idea, but maybe whatever it is it will come 
with flying cars, rocket suits and dinner in a pill. Remember that even 
if we do adopt HTML6, the doctype won’t change. Assuming the W3C 
keeps their promise and future versions of HTML remain backward- 
compatible, we'll be in good shape to take whatever comes next. 



j/^l Flash is a great tool for many applications and certainly on 
the desktop it is pervasive across operating systems and browsers. 
HTML5 and its family of technologies is trying to allow you to do 
with open standards many of the same things that Flash can do. So 
which way should you go? One thing to think about is the amount 
of investment going into HTML5 technologies within Google, Apple, 
Microsoft, and others. Over the long term, HTML5 is going to be 
a huge player, and in the mobile space it already is. So, while the 
choice is yours, and we’re sure both are going to be around for a long 
time, the industry is heading towards open standards. 


HTML — 

^rejiaeology 


We did some digging and found some code embedded in an HTML page. We’re hoping you can 
help us crack the code to figure out what it means. Don’t worry; we don’t expect you to understand this 
code, we’re just trying to get your brain warmed up with a little deductive reasoning... 



<script> 

var walksLike = 
var soundsLike = 
if (walksLike == "dog") { 

soundsLike.innerHTML 
} else if (walksLike == M 
soundsLike.innerHTML 
} else { 

soundsLike.innerHTML 

} 

</script> 



duck"; 

document. getElementByld ('▼ soundslike n ) 


="Woof! Woof! M ; 
duck") { 

"Quack, Quack"; 

"Crickets 




\rcp\rcscir\*b 

ttTAIL pagod 

pv-obably has somrthrnj 
*to do HTML 
ids. 
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I m just sayin, if you re going 
to get serious about building web 
apps and using HTML5, youve got 
to have JavaScript chops. 




We’ve gotta talk. 

If you’ve been with us since Head First HTML & CSS (or, you’ve read this far into 
the book without repurposing it as firewood) we know you probably have a good 
understanding of using markup languages and stylesheets to create great looking web 
pages. Knowing those two technologies can you get a long way... 


But, with HTML5 things are changing: web pages are becoming rich experiences 
(and full blown applications) that have behavior, are updated on the fly, and interact 
with the user. Building these kinds of pages requires a fair bit of programming and if 
you’re going to write code for the browser, there’s only one game in town: JavaScript. 


Now, if you’ve programmed or written simple scripts before, you’re going to be in 


good shape: JavaScript (despite some rumors) is a fantastic language and we’ll take 
you through everything you need to know to write the applications in this book. If you 七 

haven’t programmed before, we’re going to do everything we can to take you along for ( 七 Lmk of a 
the ride. In either case, one of the huge benefits of JavaScript is how accessible it is to or 

new programmers. nsort 


So, what now? Let’s just briefly get introduced to a little JavaScript and then we’ll 
really dive in deep in Chapter 2. In fact, for now, don’t worry too much about getting 
every detail over the next few pages — we just want you to get a feelfor JavaScript. 


way *to lcav-r\ 
{p pv-oyamf 
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what javascript can do 


Interact with your pages in new ways that 


What caw you do with JavaScript? 


work for the desktop and mobile devices. 



^ O O Fractal Explorer 



PALOS VERDES 
gumballs 

LOS ANGELES & 

LOS ANGELES s< 


With HTML5 & JavaScript you can create a 2D drawable 
surface right in your page, no plug-ins required. 


JavaScript opens up a whole new universe of 
expression and functionality to your web pages. 
Let’s look at just a few things you might do with 
JavaScript and HTML5 … 


~\ I 1 + ^hltp;//lonlhQ»l/^l<th/HTMlS/Mayidtl/fr<CUl.>nml 




No need for special 
plug-ins to play video. 


Create your own video 
playback controls 
using HTML and 
JavaScript. 


一 Access any web service and 
bring that data back to your 
app, in near real time. 


Make your pages location 
aware to know where 
your users are, show 
them what’s nearby, take 
them on a scavenger 
hunt, give them directions, 
or to bring people 
with common interests 
together in the same area. 


Use web workers to turbo-charge your JavaScript 
code and do some serious computation or make your 
app more responsive. You can even make better use of 
your user's multicore processor! 


\ Cach e data locally using 

^ br °wser storage to speed 
U P mobile apps. 


Integrate your pages with 
Google Maps and even 
let your users track their 
movement in real time. 
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Say goodbye to browser 
cookies and make use of 
browser-based local storage. 

Using JavaScript you can store lots of 
preferences and data for your users 
locally, in the browser, and even make 
it available for offline access. 






Go to Fiji 


The browser’s clearly not just for 
boring documents anymore. With 
JavaScript you can draw pixels 
directly into the browser. 





htmii 


’ScrJjpt s 

Storage 


charge your ~~~~~ 




^ CSS 咖 


崎 1314 
w *Cfc*lArrjy 


。〜 r . W :二广、〜 




Build complete video 
experiences that incorporate 
video in new ways. 


Use the power of JavaScript to 
do full blown video processing 
in your browser. Create special 
effects and even directly 
manipulate video pixels. 


You probably think we searched 
the Web far and wide to find the 
most exciting examples we could, 
right? Nope. All we did was take 
screenshots of the examples in 
the rest of this book. How’s that 
for cool? So now that you’re in 
Webville, it’s time to learn the local 
lingo: JavaScript. Come on, let’s 
get started. 
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JavaScv^pi E^oscdi 

This week’s interview: 

Confessions of a Scripting Language 


Head First： Welcome, JavaScript. We’re glad you could work us into your busy schedule. Let me just 
put it out there: HTML5 is becoming quite a celebrity~what’s your take on this? 

JavaScript： I’m not someone who seeks the limelight, I’m a behind the scenes kinda guy. That said, 
a lot of the credit going to HTML5 should be going to me. 

Head First： Why do you say that? 

JavaScript： There’s a whole family of technologies that makes “HTML5” work, like the 2D canvas, 
local storage, web workers, that kind of thing. And the truth is, it takes me, JavaScript, to really make 
use of them. Sure, HTML5 gives you a place to hold the whole experience together and present 
it, but without me, you wouldn’t have an interesting experience at all. That’s okay, more power to 
HTML5; I’m just going to keep on doing my job. 

Head First： What’s your advice for new HTML5 authors? 

JavaScript： That’s easy. If you want to really master HTML5, spend your time on JavaScript and 
all the libraries that work with HTML5. 

Head First： You know, you haven’t always had the best reputation. I’ll quote a review from 1998: 
“JavaScript is at best a half-baked, wimpy scripting language.” 

JavaScript： That hurts. I may not have started life in the clean, academic environment of many 
programming languages, but I’ve become one of the most widely used programming languages of all 
time, so I wouldn’t discount me so quickly. Not only that, but enormous resources have been poured 
into making me robust and extremely fast. I’m at least 100 times faster than I was a decade ago. 

Head First： That’s impressive. 

JavaScript： Oh, and if you haven’t heard, the standards guys also just told me I’m now the default 
scripting language for HTML5. So, I’m here to stay. In fact, you don’t even have to say “JavaScript” 
in your < script 〉 tag anymore. So they may have called me wimpy in ’98, but where are JScript, 
VBScript, Java Applets and all those failed attempts at browser languages now? 

Head First： Well it certainly sounds like you are the key to creating great HTML5 experiences. You 
do have a reputation for being a confusing language. 

JavaScript： I’m a very powerful language, despite some rumors, so you should really spend some 
time learning to use me well. On the other hand, I’m popular because I’m so easy to get up and 
running with. The best of both worlds, don’t you think? 

Head First： It sounds that way! Thanks, JavaScript, for joining us. 

JavaScript： My pleasure, anytime. 
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Writing Serious JavaScript 

With all this talk about JavaScript, we bet you’re ready to 
jump in and see what it’s all about. They don’t call this 
Head First for nothing, we’ve got a super serious business 
application below that we’re going to throw at you. For 
now, get started by going through the code to get a feel 
for it. Write down what you think each line does. Don’t 
worry, we don’t expect you to understand everything yet, 
but we bet you can make some really good guesses about 
what this code does. And, when you’re done, turn the 
page and see how close you were... 



var drink = '▼ Energy Drink"; 
var lyrics = nn ; 
var cans = 99; 




while (cans >0) { 

lyrics = lyrics + cans + " cans of " 

+ drink + " on the wall <br>"; 

lyrics = lyrics + cans + " cans of ’▼ 

+ drink + M <br>"; 

lyrics = lyrics + "Take one down, pass it around,<br>' 
if (cans > 1) { 

lyrics = lyrics + (cans-1) + " cans of " 

+ drink + " on the wall <br>"; 


else { 

lyrics = lyrics + "No more cans of 
+ drink + M on the wall <br>"; 

} 

cans = cans - 1; 


document.write(lyrics); 
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your first javascript 


Writing Serious JavaScript Revisited... 

Walk through the code again and see if you were on the mark. At 
this point you just want to get a feel for the code; we’ll be stepping 
through everything in detail soon enough. 

var drink = '▼ Energy Drink"; 
var lyrics = nn ; 
var cans = 99; 

while (cans >0) { 

lyrics = lyrics + cans + " cans of " 

+ drink + " on the wall <br>"; 
lyrics = lyrics + cans + ’▼ cans of " 

+ drink + "<br>"; 

lyrics = lyrics + "Take one down, pass it around,<br> n ; 
if (cans > 1) { 

lyrics = lyrics + (cans-1) + '▼ cans of '▼ 

+ drink + '▼ on the wall <br>"; 

} 

else { 

lyrics = lyrics + "No more cans of ’▼ 

+ drink + '▼ on the wall <br>"; 

} 

cans = cans - 1; 

} 

document.write(lyrics); 



value o( w £ncvgy Pv*mk w . 

Pcdlav-c anotiicv variable and assign 
i*t empty s-tv'mg value- 

Pcdlav-c variable assign 

it a hurwbev value, °{% 


TKis is a wKilc loop. |*t says, y/Kilc 
number o-f dans is gv-ca*tcv- tiian 
O, do cvcv-ytiimg between duvly 
bvadkc*ts. y/Kcr\ avc y\o 

dans Ic-ft 

A did 七 he l ine o-f 七 lie sor\0| *bo 

variable lyvids, us'm^ the stv-mg 

dohdatc^atiorv opcv-a*to\r 

End line witli a HTML line bveak. 

Do i 七 aja'm—all 七 hat’s Kow 七 lie 
sonj goes, vijK*t? 


Add 七 he nc % 七 vcv-sc, a^d'm using 
dor\da*tcr\*tatior\. 

l-f 七 iicvVs s 七 ill a dan lc*f 七 is, 
value o-f dans is gveatev- -t^arv I) … 

... adid 七 he las 七 line. 


otKcvy/isc, *t^cv-c avc no dans lc*f 七 … 

... so add w No move dans w -to *tKc end 
of lyvids. 


Reduce 七 he numbev o( dans lc*f 七 by I 

Wic’vc s*tovcd all 七 he lines *to 七 lie song 
•m tKc variable lyvids, so now we tell 
web page *to >wv-i*tc i*t ； just 
means *tKc s*tv-'mg is ddded bo 
so you dan see 七 lie song. 
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You didn’t think you'd do all that hard work on the exercise without giving 
JavaScript a try for real, did you? What you'll need to do is take the code from 
the previous page and type it (along with the HTML below) into a file (like 
index.html), and then load it in your browser. You'll see our results below: 

• 、 *fco download 3 ll Code sample -f iles -fov 

book, flease Visit h 七七 f:/7witkedh/smav • 七匕。啪 / 1 ^ 七你1弓 . 

<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 


A Test Drive 


<title>My First JavaScript</title> 


</head> 

<body> 

<script> 

> 

</script> 



TKc <sdv-*if*t> ar\A </sd\T*ip*t> ta^s su\r\rouir>d i\\t 
JavaSd\r*ip*t dodc. They icll that v/ha*t's 

•m is JavaSdv'ift, y\o{, WTML. 


type the JavaS^v-ip-t todt 
-rv-orw the Previous pa^e \y\ hcv»c. 


</body> 

</html> 


ttevVs ouv* *tcs*t v*ur> o( 七 his dodc* Tiic 
Code dvca*tcs 七 lie cv>tivc lyv-ids -fov 七 lie 
°[°[ be44Us dav>s o-f dvmk 

oy\ -the v/all av>d >wv-*rtcs *tV>c *m*to 
bvov/SCV dotumCirrt. 



_ o o 
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more html5 fine points 


Dumb 


are no o 

Questions 


Q/ Why was there nothing in the body of that 
HTML except the script? 

We chose to start with an empty body because 
we created all the content for this page using 
JavaScript code. Now, sure, we could have just typed 
the song lyrics directly into the body element (and that 
would have taken a lot of typing), or we can have code 
do all the hard work for us (which we did), and then 
just have the code insert the lyrics into the page with 
document.write. 

Keep in mind we're just getting our feet wet here; we're 
going to spend a lot more time in this book seeing how 
we can take a page and dynamically fill in its content 
with code. 

I get that we built up the entire lyrics to the 
song, but what exactly did the document.write do 
and how did the text get in the document? 

Well, document.write takes a string of text and 
inserts it into the document; in fact, it outputs the string 
precisely where the script tag is located. So, in this 
case document.write outputs the string right into the 
body of the page. 

You’re soon going to see more sophisticated ways to 
alter the text of a live document with JavaScript, but 
this example should give you a flavor of how code can 
dynamically change a page. 


You’ve been using the terms web page and 
web application; are they two different things? 

What makes something a web application? 

That’s a great question because we're using the 
terms loosely. There's no technical difference between 
the two; in other words, there’s nothing special you do 
to turn a page written with HTML, JavaScript and/or 
CSS into a web application. The distinction is more one 
of perspective. 

When we have a page that is acting more like an 
application than just a static document, then we start 
thinking of it as a web application and less as a web 
page. We think of applications as having a number of 
qualities such as holding lots of state, managing more 
complex interactions with the user, displaying dynamic 
and constantly updated data without a page refresh, or 
even doing more complex tasks or calculations. 

Hey, all this JavaScript is great, but what 
about CSS? I’m really itching to take advantage of 
some of the new CSS3 stuff I’ve been hearing about 
to make my pages look better. 

Yes, CSS has come a long way and we’re thrilled 
it works so well with HTML5. Now, while this book 
isn’t about CSS3, you can be sure we're going to take 
full advantage of some of its new capabilities. As you 
might know, many of the tricks we used to do to add 
rounded corners and shadows with images in HTML, 
and simple animation with JavaScript, can now be 
easily done with CSS3. 

So, yes, we're going to make use of the power of CSS3 
in this book, and we’ll point out when we’re doing so. 
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O 



Weve talked about 
a bunch of things including HTML 
markup, JavaScript APIs, a ''family of 
technologies” and CSS3. What exactly 
is HTML5? It can’t just be the markup 
everyone is so excited about... 



We’ll give you our unofficial answer: 


HTML? 

4 



/Wavkuf + JavaSdvif-t APIs + CSS 


You see, when most people are talking about the 
promise of HTML5, what they mean is all of these 
technologies combined. That is, we have markup 
to build the core structure of our pages, we have 
JavaScript along with all its APIs to add behavior 
and new functionality, and we have CSS to style our 
pages — and together, these are the technologies we’re 
all going to use to build tomorrow’s web apps. 

Now, why did we say unofficial? Well, there are people 
who like to make hard distinctions among these 
technologies and which standard each belongs to. 

And that is fine and has its place. But, what we care 
about is this: what technologies are available in the 
browser, and are they ready for us to use to craft our 
pages and applications? So, we say HTML5 is markup 
+ JavaScript APIs + CSS, and we think that is what 
people generally mean when talking about HTML5 as 
a technology. 

l-P youVc vcally *m*tcv-cs*tcd ho\w ihese 

-f rt as a sc*t of sisinds^rds 

(sY\d we all should be) wc c^douva^c you *to 

Visi*t v/^-oV^ move iir>-(*oVnr\3'tior>- 
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what is html5, really 



Congratulations, you’ve 
finished Chapter 1 and 
written your first 9TML5! tli 


Before you run off to the next chapter, we’ve 
got one more task for you to drive it all home. 
Use the magnets below to fill in the formula 
that solves the equation of “what is HTML5?’ 
Careful now, there are some distractions 
thrown in with that pile of magnets. Once you’ve solved it, get some 
rest and refresh yourself before moving on to Chapter 2. 


+ 


+ 
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BULLET POINTS - 

■ HTML5 is the newest version of HTML. It 
introduces simplified tags, new semantic 
and media elements, and relies on a set 
of JavaScript libraries that enable web 
applications. 

■ XHTML is no longer the standard for web 
pages. Developers and the W3C decided to 
keep extending and improving HTML instead. 

■ The new, simpler HTML5 doctype is 
supported by older browsers—they use 
standards mode when they see this doctype. 

■ The type attribute is no longer needed in the 
<script> tag or in a stylesheet link to CSS. 
JavaScript and CSS are now the defaults. 

■ The <meta> tag used for specifying the 
character set has been simplified to include 
only the character encoding. 

■ UTF-8 is now the standard charset in use on 
the Web. 

■ Making changes to the doctype and <meta> 
tag won’t break your pages in older browsers. 

■ HTML5’s new elements are a superset of 
HTML 4 elements, which means older pages 
will continue to work in modern browsers. 

■ The HTML5 standard won’t be officially 
complete until 2014, but most modern 
browsers will support it long before then 
(many support it now!). 


■ HTML5 introduces elements that add new 
semantics to your pages, giving you more 
options for creating web page structure than 
we had with HTML 4.01. We aren’t covering 
these in this book, but we have a small guide 
to them in the appendix. 

■ Many of the new features in HTML5 require 
JavaScript to make the most of them. 

■ Using JavaScript, you can interact with the 
DOM—the Document Object Model. 

■ The DOM is the browser’s internal 
representation of a web page. Using 
JavaScript, you can access elements, change 
elements, and add new elements to the DOM. 

■ A JavaScript API is an “Application 
Programming Interface.” APIs make it 
possible to control all aspects of HTML5, like 
2D drawing, video playback, and more. 

■ JavaScript is one of the most popular 
languages in the world. JavaScript 
implementations have improved dramatically 
in recent years. 

■ You'll be able to detect whether a new feature 
is supported in a browser and gracefully 
degrade the experience if not. 

■ CSS is the style standard for HTML5; 
many people include CSS when they use 
the term “HTML5” to describe the family of 
technologies used to create web applications. 
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exercise solutions 



HTMLScposs 


It’s time to give the right side of your brain a break 
and put that left side to work. All these words are 
HTML-related and from this chapter. 



Across 

2._plug could also be called spam. 

8. Product that cleans up your HTML5 in three steps. 

11. Your mission was browser_. 

13. The real power of HTML5 is the JavaScript_. 

14. JavaScript is_times faster than a decade ago. 

15. Use a_loop to print verses of a song. 

16. Got the Dear John letter. 


Down 

1. The_is an internal representation of a web page. 

3. The version of HTML before HTML5. 

4. The <_> tag tells the browser what follows is 

JavaScript, not HTML. 

5. We want our web experiences to degrade_. 

6. Much simpler than the HTML 4.01 version. 

7. The standard scripting language of HTML5. 

9. This attribute of the link and script tags is no longer 
needed in HTML5. 

10. The official style standard for HTML5. 

12. New in HTML add semantics and structure. 
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O 办 

We’ve already talked about the “family of technologies” so much we feel like they’re ， well, family. But then again we 
really haven’t gotten to know them yet, so isn’t it about time? You'll find the whole family below. Go ahead, mingle, 
see if you can figure out who is who. We’ve gone ahead and figured one out for you. And don’t worry, we know this is 
your first time meeting the HTML5 family members, so here is the solution. 


CSS3 


Veb 


細 Web ^ 








Canvas 





Using me, you can draw right into your web page. With me, you 
can draw text, images, lines, circles, rectangles, patterns and 
gradients. I’ll bring out your inner artist. 

You might have used me in HTML 4 to enter information, but 
I’m even better in HTML5. I can require that you fill out fields, 
and I can more easily verify that you’ve typed an email, URL or 
phone number where you’re supposed to. 


You used to need a plug-in for us, but now we’re first class 
members of the HTML family of elements. Wanna watch or 
listen to something? You need us. 

We’re here to help with the structure and semantic meaning 
of your page, including new ways of making sections, headers, 
footers and navigation in your pages. 

I’m the most stylish one in the family. You’ve probably used me 
before, but did you know I can now animate your elements, give 
them great rounded corners and even drop shadows? 

Use me as a bit of local storage in every user’s browser. Need 
to store a few preferences, some shopping cart items, or maybe 
even stash a huge cache for efficiency? I’m your API. 

Need applications that work even when you aren’t connected to 
the network? I can help. 

I’m the API that can tell you where you are, and I play nice with 
Google maps. 

You’ll want me whenever you need several scripts running 
concurrently and in the background, so your user interface 
remains responsive. 
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HTML5cross Solution 
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2 ixittoducfng JavaScript ancl tJie DOM 

♦ A Little Code 參 



JavaScript is going to take you to new places. You 

already know all about HTML markup (otherwise known as structure) 
and you know all about CSS style (otherwise known as presentation), 
but what you’ve been missing is JavaScript (otherwise known as 
behavior). If all you know about are structure and presentation, sure, 
you can create some great-looking pages, but they’re still just pages. 


When you add behavior with JavaScript, you can create an interactive 
experience; or, even better, you can create full blown web applications. 
Get ready to add the most interesting and versatile skill in your web 


toolkit: JavaScript and programming! 



f[Y\d i-f you 
w\os*t 


this is a new chapter 


how javascript works 


The Way JavaScript Works 

Our goal is to write JavaScript code that runs in the 
browser when your web page is loaded — that code might 
respond to user actions, update or change the page, 
communicate with web services, and in general make 
your page feel more like an application than a document. 
Let’s look at how all that works: 


<html> 

<head> 

<script> 
var x = 49; 

</script> 

<body> 

<hl>My first JavaScript</hl> 
<px/p> 

<script> 
x = x + 2; 

</script> 

</body> 

</html> 





Writing 

o 


Loading 



Running 

❺ 


You create your HTML 
markup and your 
JavaScript code and put 
them in files, say 
index.html and index.js 
(or they both can go in 
the HTML file). 


The browser retrieves and 
loads your page, parsing 
its contents from top to 
bottom. 

As it encounters JavaScript, 
the browser parses the 
code and checks it for 
correctness, and then 
executes the code. 

The browser also builds an 
internal model of the HTML 
page, called the DOM. 



JavaScript continues 
executing, using the 
DOM to examine the 
page, change it, receive 
events from it, or ask 
the browser to retrieve 
other data from the 
web server. 
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What caw you do with JavaScript? 

Once you’ve got a page with a < script 〉 element (or a 
reference to a separate JavaScript file), you’re ready to 
start coding. JavaScript is a full-fledged programming 
language and you can do pretty much anything with it you 
can with other languages, and even more because we’re 
programming inside a web page! 

You can tell JavaScript to: 

o make a statement 

Create a variable and assign values, add things together, 
calculate things, use built-in functionality from a 
JavaScript library. 

var temp = 98.6; 

var beanCounter = 4; 

var reallyCool = true; 

var motto = "I Rule"; 

temp = (temp - 32) *5/9; 

motto = motto + n and so do you! n ; 

var pos = Math.random(); 



❷ do things wore thaw once, or twice 


Perform statements over and over, as many times as you need to. 

while (beanCounter > 0) { 

processBeans(); 

beanCounter = beanCounter - 1; 


❺ make decisions 

Write code that is conditional, depending on the state of your app. 

if (isReallyCool) { 

invite = "You're invited! n ; 

} else { 

invite = '▼ Sorry, we ' re at capacity. 


XJ 


you are here ► 
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declaring a variable 


Variables hold things. With JavaScript they can hold lots of 
different things. Let’s declare a few variables that hold things: 


var winners = 2; 




Ueyv" values. 


^Po*m*t i^umcv-i£. values, 
var boilingPt = 212.0; ^ , . o . , / 

— Oy', stv-mjs ok dhav-a^tev-s Cy/c 

var name = "Dr. Evil"; 
var isEligible = false; 




td\\ those w s*t\r*mjs, w -fov shovt). 


O^r a boolean value ； 

whidh is tiruc o\r -false. 


Three steps of creating a variable 


① 





var scoops 


© ® 


10 


The first step is to declare your variable, in this case 
scoops. Notice that JavaScript, unlike some languages, 
doesn’t need a type for the variable, it just creates a 
generic container that can hold lots of things: 



scoops 

Next we need a value to put in the variable. We can 
specify a value in a few ways: 

Youv value tav\ be a li 七 eval value, 
like a ir»umbcv- ov- d s*bv"mj- 


var scoops = 10 
var scoops = totalScoops / people; 
var scoops = Math.random() * 10; 


Ov, tKc value dan be tKc 
vcsult o-f an c^vcssion- 

Or use or\t of JavaSdv-ip-fe ； s 
七饮 hal lib\ra\ry 叫 like 

a Jc^cva-tov-, io 

^v-caic a value- Alov-c ok» -this a^d 
youir own +uir>d-feioir»s la-tcv. 



winners 




name 



Variables are 
containers lor 
kolctingf values. 
JavaScript 
variables don’t 
kave strict types, 
so any variable 
can liolct a 
nuititer，a string 
or a Looleaiu 
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③ 


Finally, we have a variable and we have a value (a literal 
value, like 10, or the result of evaluating an expression 
(like totalScoops / people)), and all we need to do is 
assign the value to the variable: 



scoops 


Ahh, rm no longer 
undefined, I now have 
a value of my very own. 


Of course, once you have a variable created, you can 
change its value at any time, or even change it to a value 
that has a different type. Here are some examples: 

匕 - Wic 乙 dw stools *to 3ir»o*bV\cv 

scoops = 5; nrv-bcyv* value. 

Qy evevt use stools .rtsclf h 扣 
e^ess'ioy^ its value- 

scoops = scoops * 10; ^ Wis tast stools Jl be *50. 




狀 filti 


■ Each statement ends in a semicolon. 

X = X + 1 ; 

■ A single line comment begins with two 
forward slashes. Comments are just 
notes to you or other developers about 
the code.They aren’t evaluated. 

// 工 ， m a comment 

■ White space doesn’t matter (almost 
everywhere). 

x — 2233 ; 

■ Surround strings of characters with 
double quotes. 

"You rule!" 

■ Variables are declared using var and 
a name. No types are required, unlike 
some other languages. 

var width; 


scoops 


scoops 


="Tired 

=null; 



of being an integer"; 

0>r, wc dan value and -type 

l o( sdoo^s, in *t^is dase *to a 

^ 一 1 Cav-c-rul, tiiis dould dduse bi(\ issues irv 


youv todc i-f 
dc a numbev 


bi^ 

you’ve sdoops *to 

• Move OY\ 七 his m a bit- 


0^) *tlic\rc ; s evem a value in JavaSdv*ip*t 

1 Vo value” Its dalled ^ull. lA/ell see how 
tVis is used laicv. 


■ Don't use quotes around the boolean 
values true and false. 

rockin = true; 

■ Variables don’t have to be given a value 
when they are declared: 

var width; 



What is the value of my variable when I just write: 
var winner; 

After this statement is executed, the variable winner will be 
assigned the value undefined, which is another JavaScript value 
and type. We’ll see where and how to use this later in the book. 


I’ve seen other programming languages where variables 
are declared with a type. Like int x or string y. Does 
JavaScript not have types? 

JavaScript does have types, but unlike languages you might 
have used before, JavaScript has dynamic typing, which means that 
you don’t have to specify a type, and the JavaScript interpreter will 
figure out what type to use as your code is running. 
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How to name your variables 

You might be wondering how you pick names for 
your variables? If you’re used to naming ids in your 
HTML elements, you’ll find variables very similar. 
There are only a few rules for creating names: 


Rule # l: Start your variables with a letter, 
m underscore or a dollar sign. 

You want to get off to a good start with naming 
your variables, not just by making them meaningful, 
but also by using a letter (small or uppercase), an 
underscore character or a dollar sign. Here are some 
examples: 


Serious - 

Coding 

Numbers, strings and booleans are all 
known as primitive types in JavaScript. 
There is one other thing you can 
store in a variable, an object. We'll be 
talking about objects soon enough, 
but for now you can think of an object 
as a collection of things, whereas a 
primitive is just one thing that can't 
be broken up into anything else. 




var thisIsNotAJoke; 
var 一 myVariable; 
var $importantVar; 

Po 七 Wis … 


y/i-th humbcv , ⑽七 good. var 


Bcg'm v/i 七 h symbols (% ar\d 
七 ha 七 av*eir / 七 allowed. 


々 var 


var 


3zip; 
%entage; 
〜 approx; 


...r\o*b 七 his. 



Rule ^Z: then you can use any number of letters, 
numeric digits, underscores or dollar signs. 

Keep using letters, dollar signs, and underscores to create 
your variable name. After the first character you can also 
thrown in numbers if you like: 



var my3sons; 


var cost$; 


var vitaminBl2 


七 illS … 


…七 a spaa 七 allowed^ var zip code ; 

6ioi + Moi ^ var first-name 

allowed Bv\d will var to+do ; 


scv-iously do^-Pusc 

JavaS^vipt 


… no 七 *bV^is. 
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Rule ^3: Make sure you avoid all of JavaScript's reserved words. 

JavaScript contains a number of words that are reserved, such as if, else, while, and for (to 
name just a few), and JavaScript doesn’t take too kindly to you trying to use those reserved 
words for your variable names. Here’s a list of JavaScript’s reserved words. Now ，you don’t 
need to memorize them, and you’ll develop a sense of what they are as you learn JavaScript, 
but if you’re ever perplexed by JavaScript complaining about how you’ve declared your 
variables, think, “Hmm, is that a reserved word I’m trying to use?” 


abstract 

delete 

goto 

null 

throws 

as 

do 

if 

package 

transient 

boolean 

double 

implements 

private 

true 

break 

else 

import 

protected 

try 

byte 

enum 

in 

public 

typeof 

case 

export 

instanceof 

return 

use 

catch 

extends 

int 

short 

var 

char 

false 

interface 

static 

void 

class 

final 

is 

super 

volatile 

continue 

finally 

long 

switch 

while 

const 

float 

namespace 

synchronized 

with 

debugger 

for 

native 

this 


default 

function 

new 

throw 




/\void as variable 


tWeiare no o 

Dumb Questi9ns 


What if I used a reserved word as 
part of my variable name? Like, can I 
have a variable named ifOnly (that is, a 
variable that contains the reserved word 
if)? 

You sure can, just don’t match the 
reserved word exactly. It’s also good to 
write clear code, so you wouldn’t in general 
want to use something like eize, which 
might be confused with else. 


Is JavaScript case sensitive? 

In other words are myvariable and 
MyVariable the same thing? 

If you’re used to HTML markup you 
may be used to case insentitive languages, 
after all <head> and <HEAD> are treated 
the same by the browser. With JavaScript 
however, case matters and myvariable and 
MyVariable are two different variables. 


I get that JavaScript can assign a 
value at any time (number, string, and so 
on) to a variable. But what happens when 
I add two variables together and one 
is a number and the other is a string of 
characters? 

JavaScript tries to be smart about 
converting types for you as needed. For 
instance if you add a string and a number, 
it usually tries to convert the number to a 
string and concatenate the two together. 
Now in some cases that is great, and in 
some cases it isn’t what you wanted. Hang 
on to that thought and we’ll come back to it 
in just a sec. 
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Webville Guide to Better Naming 

You’ve got a lot of flexibility in choosing your variable names, so we 
wanted to give you a few tips to make your naming easier: 



Choose names that mean something. 

Variable names like _m, r and foo might mean something to you but they are 
generally frowned upon in Webville. Not only are you likely to forget them over time, 
your code will be much more readable with names like angle, currentPressure and 
passed. 

Use “camel case” when creating multiword variable names. 

At some point you’re going to have to decide how you name a variable that 
represents, say, a two-headed dragon with fire. How? Just use camel case, 
in which you capitalize the first letter of each word (other than the first): 
twoHeadedDragonWithFire. Camel case is easy to form, widely spoken in Webville 
and gives you enough flexibility to create as specific a variable name as you need. 
There are other schemes too, but this is one of the more commonly used (even 
beyond JavaScript). 


Use variables that begin with _ and $ only with very good reason. 

Variables that begin with $ are usually reserved for JavaScript libraries and while 
some authors use variables beginning with _ for various conventions, they aren’t 
widely used and we recommend you stay away from both unless you have very good 
reason (you’ll know if you do). 

Be safe. 

Be safe in your variable naming; well cover a few more tips for staying safe later in 
the book, but for now be clear in your naming, avoid reserved words, and always use 
var when declaring a variable. 
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fretting Expressive 

We’ve already seen some JavaScript statements that look like: 


JavaSdvift 


scoops 


\/av-*iablc 


T 


scoops - 1; 




But let’s take a closer look at expressions, like the one in 
this statement. It turns out expressions are everywhere in 
JavaScript, so it’s important to know the kinds of things you can 
express. Here are a few … 


V^u w\ri-tc CXpvcssioh 
七 ha 七 result \y\ hurwbev-s... 


Numeric expressions 

(9/5) * tempC + 32 
x - 1 

Math.random() * 10 

2.123 + 3.2 


You y/V-'i*tc 
C'/.fV-CSSioirtS 

V-CSuH ： ^ 

boolean values -true 
or -false (-tV^csc av-c, 

obviously ； boolc 3 ir\ 
ocpv-cssions). 


boolean expressions 


2 : 3 

tempF < 75 

Pet == ” Duck ” leVel == 4 


• you wv-itc 
cxpvcssiohs -that 
result ih s-tirih^s. 


'March' 


String expressions 


super" + n cali’’ + y ouKnowTheRe s t 

+ ” 21 ” + ”st” P * lnnerHr ^ 

phoneNumber.substring(0, 3) 


Keep an eye on expressions over the next few 
pages (not to mention the rest of the book), and 
you’re going to see how they are used to compute 
things, do things multiple times and to make 
decisions in your code. 


TV>cv-c av-c o*thcv- -types o( 
c%pv-css*io^s *too ； >wc II be 
*to *thcsc la*tcv*. 


Other expressions 

function () {...} 
document.getElementByld("pink' 
new Array(10) 
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Express Yourself! 

You’ve seen the different types of expressions you can 
use in JavaScript; now it’s time to put that knowledge 
to work by evaluating some expressions yourself. 
Check your answers at the end of the chapter. 


(9/5) * tempC + 32 

What’s the result when tempC is 10? 

"Number" +，▼，▼ + n 2 M 

What’s the resulting string?_ 


level >= 5 

What’s the result when level is 10? 
How about when level is 5? 


color != ” pink" ^ fkt ! mea ⑽⑽七 • 

What’s the result if color is “blue ”？ 


(2 * Math.PI) * r 

What’s the result if r is 3? 

C 斤… 如 Math.p/ aivcs 

Y ou the value o\ pi 
(yo“ khow, 午… •） 



Noi "this k'rnd o-p cxpvcssioh^ 


^>arpen your pencil 


Based on what you know so 
far about JavaScript variables, 
expressions and statements, see 
if you can figure out which of 
these are legal and which might 


cause an error. 


From the following list, circle the 
statements that are legal. 


var x = 1138 


var y = 3/8; 


var s = "3-8 


x = y; 


var n = 3 - "one 1 


var t = "one' 


var 3po = true; 


two' 


var level 




11 


var highNoon = false; 

var $ = 21.30; 

var z = 2000; 

var isBig = y > z; 

z = z + 1; 

z--; 

z y; 

x = z * t; 
while (highNoon) { 
z--; 
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Remember when we said JavaScript makes 
programming easy to get into? One of the ways it 
does that is by taking care of converting types to other types as 
needed to make expressions make sense. 

As an example, say you have the expression: 

message = 2 + '▼ if by sea"; 

Now ，we know that + could be for adding numbers together, 
and it’s also the operator used to concatenate strings together. 
So which is it? Well, JavaScript knows that the string “ if by 
sea” is never going to look like a number, so it decides this 
is a string expression, converts the 2 to a string “2”， and the 
variable message is assigned to “2 if by sea”. 

Or, if we have the statement: 


Everything seems to work 
well if I add numbers to numbers or 
strings to strings, but what if I add a 
number to a string? Or an integer to a 
floating point number? 


value = 2 * 3.1; 

JavaScript converts the integer 2 into a floating point number 
and the result is 6.2. 


As you might guess, however, JavaScript doesn’t always do what 
you want, and in some cases it needs a little help in conversions. 
We’ll be coming back to that topic a little later. 





What does JavaScript evaluate the following statements to? 

numORStringl = "3" + "4 M 
numORString2 = "3 M * M 4 M 


And why? 
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while {juggling) { 

keepBallsInAir(); 


Poiwg things over and over... 

If we did everything just once in a JavaScript program it would probably be a 
pretty boring program. You do a lot of things multiple times — you rinse, lather, 
repeat, until hair is clean, or, keep driving until you reach your destination, or 
keep scooping your ice cream until it’s all gone — and to handle these situations, 
JavaScript gives you a few ways to loop over blocks of code. 



You can use JavaScript’s while loop to do something until a condition is met: 


(\ot a tub o-f \tt 加 a 州，釙 d 七⑼ stoops 

• m •• 七 . Hcvc S a variable dcdla^cd to 

Wile uses a boolean t%yrtss\oY\ evaluates -to o>r 

^alsc. l-f tv-uc, codt , 

WW\\t there av-C mov-c *tha^ ZJtYO sdoops Ic-ft, v/cVc 
^o'm^ *to keef do'm^ cvcv-y-thmj'm this toAt bio 乙 k. 


var scoops = 10; 


while (scoops > 0) { 

alert("More icecream! n ) 


scoops = scoops 



alert("life without ice cream isn't the same"); 


hrnc 七 —_ — 讪心 1 外 y/eal 饮 t — uw 

thc^rc .s ^ \tt ad the” w take o 此 s^oop 

av/ay by sub^adtmg o„c the o( Sdoops. 


ihc do^diiior> (sdoops > O) is -false, ihc loop is 
done, 扣 d "the Code do^tmucs hev-e, y/i 七 h 

whatever 七 he 灼 Imc of youv- pv-ogv-arw is. 
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So if you think about the while loop, we’re initializing some values, say, the 
number of ice cream scoops left, which the while loop tests, and if true, we execute 
a block of code. And, the block of code does some work that at some point updates 
the value involved in the conditional test so that the condition fails and the loop ends. 




INITIAL!^ 


var scoops 


10 


DO C0KPITI0NAL TEST 


while (scoops >0) { 

alert("More icecream! 
scoops = scoops - 1; 


桃 CWTE COVB dLOC^ 
C0UV\T\0UhL TKTIS TRUE 


UPDATE 




COHJimt AFTER LOO? 

comrm fails 



alert("life without ice cream isn't the same"); 


JavaScript also provides a for loop, which formalizes this structure a little more. 
Here’s our ice cream code written with a for loop instead: 


UPDATE 


INITIALIZE 


VO COKPITIONAL TKT 


for (scoops = 10; scoops >0; scoops--) { 
alert("There's more ice cream !”）； 



B)(BCUTB COVB 3L0Ct( 
C0NPITI0NAL TEST IS TRUE 


^ CONTINUE AFTER LOOP 

alert ("life without ice cream isn't the same") ; CONDITION FAILS 


iherejctre no 

Dumb Questi 


9ns 




The while and for loops seem the same to me. When do I use which? 


In general you can do the same things with a for or a while; however, as you can see with the ice cream example, the for loop 
is a little more compact, and you might argue the while loop is more readable. So, it really is a matter of which fits best given your 
situation. In general, for loops get used more for iterating over a fixed number of values (say, over the items in a shopping cart), 
and while loops are used more to loop until a condition is met (say, giving the user a test until he gets it right). 
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2 


BE th^ B 鱗總 
Each of the JavaScript snippets on 
tiiis pa^e is a separate piece of code. 
Your job is to play browser, and 

evaluate eacK snippet 
of code and answer a 
question about tire result 
Write your answer to tire 
question below tire code. 

Chc^k you\r answers a 七 "the 
ti\A of -the ^hapiev-. 


var tops = 5; 
while (tops >0) { 

for (var spins = 0; spins < 3; spins++) { 
alert("Top is spinning !”）； 

} 

tops = tops - 1; 


1 

var count = 0; 

for (var i = 0; i < 5; i++) { 
count = count + i; 

} 

alert ("count is ’▼ + count); 
l/Vhai docs -the alert show? 


ttow rwa^y -times do you see 
七 he alc\rt, w 7op is spiKmmg "’？ 

for (var berries = 5; berries > 0; berries--) { 
alert("Eating a berry"); 

} 

How bevVies did you ca-t? ^ 

for (scoops = 0; scoops < 10; scoop++) { 
alert("There's more ice cream! n ); 



alert("life without ice cream isn't the same"); 

ttov ； ma^y sdoops o-f \tt dv-cam did you cat? 
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Make decisions with JavaScript 

We’ve been using boolean expressions in for and while statements as 
a conditional test to decide whether to continue looping. You can also 
use them to make decisions in JavaScript. Here’s an example: 




if (scoops < 3) { 

alert("Ice cream is running low!"); 


s ou\r boolean cxpmcssioh, testihg 

"to sec how scoops arc Ic-ft- 

|-f -thcv-c are < 冬 spoofs Ic-ft wc *th ⑼ Code bio 乙 k. 


We can string together more than one test too: 


if (scoops < 3) { 

alert("Ice cream is running low!"); 

} else if (scoops > 9) { 

alert("Eat faster, the ice cream is ); 



Add as tests with u clsc i-f w as 
you Y\ttd, with its oy/h assodiaied 
匕 ode bio 乙 k that will be executed wheh 
the dohditioh is -fc^uc. 
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Making more decisions... awd, adding a catchall 

You can provide a catchall for your if statements as well — a final else that is run if 
all the other conditions fail. Let’s add a few more if/elses and also a catchall: 


4^^ 一 wc this io ohly kappeh 

wkh 父 oops is pircdiscly l. 

if (scoops == 3) { ' 1 

alert("Ice cream is running low!"); 

} else if (scoops > 9) { 


alert ("Eat faster, the ice cream is going to melt !’’）； 


} else if (scoops == 2) { 
alert ("Going once! '▼); 

} else if (scoops == 1) { 
alert("Going twice!"); 
} else if (scoops == 0) { 




1^(5 VC sddcd dddi 七 iohdl ^OhdrbiohS "to 
have 3 ^ouhtdowh -fco zjcyo scoops. 


alert("Gone!"); 


} else { 


alert("Still lots of ice cream left, come and get it."); 

s ou\r i-P hohc o-f the 

^ohditiohs above av-c tvuc, tkh iWis 
blodk is guav-ahtccd -to execute. 




Take the code above and insert it into the while loop below. Walk through the 
while loop and write down the alerts in the sequence they occur. Check your 
answer at the end of the chapter. 


var scoops = 10; 
while (scoops >= 0) 


|hsc\rt *thc Code above hcv-c- 


scoops = scoops - 1 


alert("life without ice cream isn't the same") 
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Code Magnets 


This code prints out a well-known palindrome in an alert. The problem is that some of the 
code was on fridge magnets and fell on the floor. It’s your job to put the code back together 
again to make the palindrome work. Watch out; there were a few magnets already on the 
floor that don’t belong here, and you’ll have to use some of the magnets more than once! 
Check your answer at the end of the chapter before you go on. 


var wordl = 
var word2 = 
var word3 = 
var word4 = 
var word5 = 

var phrase = 


for (var i = 0; 


T V • 

» f 

nam M ; 
nal p n ; 
lan a c"; 
a man a p' 


if (i == 0) { 
phrase = 


else if (i == 1) 
phrase = _ 


word4 


(i == 2) 


phrase + wordl + word3; 


phrase = phrase 


+ word2 + wordl; 


alert(phrase); 



j I word5 y 


phrase 



http：//iocalhost 

a man a plan a canal panama 


'~oiT 



A ^alrndv-ome is a 七 ha 七 

be vead same way badk>wav*ds 
av\d -Povwav-dsl Hcvc^s -the 
f>almdiv~ome you should see i-P 

av-e all m 七 he vi^ivt flakes. 


else j 


wordO 




「 else if j 


<3 



I word3 j 
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how to put javascript in a page 


O 



I was told wed 
be putting JavaScript in 
our web pages. When are we going 
to get there, or are we just going to 
keep playing around with JavaScript? 


Yes, that is the point. First, you 
needed to know a few basics. Here’s what 
we’ve done so far: you know how to declare 
and use JavaScript variables, and you 
know how to build basic statements and 
expressions. You also know how to use all 
those together to write conditional code with 
if/else statements, not to mention do things 
iteratively with while and for statements. 

With that under your belt, now we’re going to 
see how to place JavaScript in your page, and 
more importantly, how JavaScript interacts 
with your page. That is, how you determine 
what’s in your page, how you change your 
page, and, a bit more down the road, how 
you write code to react to things happening in 
your pages. 


So, while we’re not done with JavaScript yet, 
your wait is over; it’s time to see how markup 
and behavior work together... 
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How awd where to add JavaScript to your pages 

To use JavaScript you’ve got to add it to a web page. But where and how? You 
already know there is a < script 〉 element, so let’s see where we can use it and how 
that affects the way JavaScript executes within your pages. Here are three different 
ways you might add code to your page: 


>u t^r\ type 
you\r Code 
v-ijh-t iivto 
you\r web page, 
o\r Yt\t>rtY\Ct 

a separate 

-fil 

usmj the s\rd 
attv-ibu-tc o-f 

the s^v-ipi tag. 


Ov- you t^y\ 
f>ldde youv to&t 
(or d 

bo you\r CoAt) 

•m 七 he body* 

TWis CoAt yb 
c%cdu*tcd as i\\t 
body »s loaded- 


pladc <s£rif*t> elemerrb m 
<V^cad> of your HTML -to i^avc i\\t^ 
c%c^u*tcd bc-fovc *bV^c pay loads. 



HTML file 


head 



<script> 

statement 

</script> 


<script src="mycode.js’ 
</script> 


Most *tV^c ■biw'C todc is added *to 
\\tad i\\t pay. Tiicv-c avc some sl’^vt 
advarrba^cs -to addm^ youv 
todc at tV^c cr^d body, but o^ly ^ 
you vcally r\ccd *bo supcv--op*tim'iz^ youv 
pc\r-fo\rmaK\£.C. 


Place your script inline, 
in the <head> element. 

The most common way to add code to 
your pages is to put a < script 〉 element 
in the head of your page. When you add 
JavaScript in the <head> element, it is 
executed as soon as the browser parses 
the head (which it does first!), before it has 
parsed the rest of the page. 


Add your script by referencing 
a separate JavaScript file. 


You can also link to a separate file 
containing JavaScript code. Put the URL 
of the file in the sre attribute of the 
opening <script> tag and make sure 
you close the script element with 
</script>. If you’re linking to a file in 
the same directory, you can just use the 
name of the file. 


Add your code in the body 
of the document, either inline 
or as a link to a separate file. 

Or, you can put your code right in the 
body of your HTML. Again, enclose your 
JavaScript code in the <script> element 
(or reference a separate file in the sre 
attribute). JavaScript in the body of your 
page is executed when the browser parses 
the body (which it does, typically, top 
down). 
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interaction with a page 


How JavaScript interacts with your page 

JavaScript and HTML are two different things. HTML is 
markup and JavaScript is code. So how do you get JavaScript 
to interact with the markup in your page? You use the 
Document Object Model. 


rou\r 


bvowscv" 






① When you load a page into the 
browser, the browser parses the 
HTML and creates an internal model 
of your document, that contains all 
the elements of your HTML markup. 




dynamically, so you see new 
content on your page. 



lAfe tall 七 Wis 七 

七 Object 
Model, you 
ask bo 七 ell you 
about 七 

you\r 

Wc u\\ POM, -fov sliovt. 


② 


Your JavaScript can interact 
with the DOM to get access 
to the elements and the 
content in them. JavaScript 
can also use the DOM to 
create or remove elements 
(among a number of other 
things we’ll be getting to). 


^1 

s -though ireadihg, ire 

^ ahd ihc t>0M ihai 

Java£M ? i ^ bc uscd ^ 

“ pag«/a pP s. This 
book will show you how. 
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javascript and the dom 


How to bake your very own POM 

Let’s take some markup and create a DOM for it. Here’s a simple 
recipe for doing that: 


Ingredients 

One well-formed HTML5 page 
One or more web browsers 




Instructions 

1. Start by creating a document node at the top. 


document | 

2. Next, take the top level element of your HTML 
page, in our case the <html> element, call it 
the current element and add it as a child of the 
document. 



3. For each element nested in the current element, 
add that element as a child of the current 
element in the DOM. 


<!doctype html> 

<html lang= n en”> 

<head> 

<title>My blog</title> 

<meta charset= M utf-8 M > 

</tlZt Pt SrC=Mblo ^O sM X/script> 

<body> 

<hl>My blog</hl> 

<div id= M entryl M > 

<h2>Great day bird watching</h2> 

Today I saw three ducks! 

工 named them 

Huey, Louie, and Dewey 

</p> • 

<P> 

工 took a couple of photos 

</p> 

</div> 

</body> 

</html> 





document 




4. Return to (3) for each element you just added, 
and repeat until you are out of elements. 


WeVe already fully 
baked this VOMforyou. 

Turw the page to seethe t 
偏 shed l?0M. 
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introducing the document object model 


A first taste of the POM 


The beauty of the Document Object Model is that it gives us a consistent way, 
across all browsers, to gain access to the structure and content of the HTML 
from code. That’s huge. And we’re going to see how all that works in a sec... 

Back to our example; if you follow the recipe for creating a DOM you’ll end 
up with a structure like the one below. Every DOM has a document object at 
the top and then a tree complete with branches and leaf nodes for each of the 
elements in the HTML markup. Let’s take a closer look. 


lAfe sbrUhArt b> 

a brtt because a a 

s*bru 乙七 uve 七七 Corots 
tomfutev sC\tv\U- 



POM. 


document 




oH Wtt (because 

dv*c y\o mside 


dodumcirrt is also like voot 
o-f By\ upside do^iv\ brtt- 



My blog 


/ These a\rc like 七 he 
^ of -the "bree. 



div id= 〃 en1ryr 



Great Today I took a 

day bird I saw couple of 

watching three... photos... 


jus 七七 wt). 


TV P_ \uWdts co^i tV^c pay as well as tir>c 
elements. (Wc Ao^i always siiow all it%i 乙咖七⑼七 

y/c dv"3>/ bu"t **b s "tiicvc)- 






































javascript and the dom 



现 Ae Browser 

Your job is tke act like 
yo^re the browser. You 
need to parse ike IfTML 
and build your very own 
DOJVl from it. Go ahead 
and parse the HTML to 
the rigk, and draw your 
DOJVl below. WeVe already 
started it for you . 〕 

Chcdk you\r a^sv/cv y/i-th 
ou\r solution si 七 he tr\d 
o( -the dhap-tev- bc-Po\rc 
you jo OY\- 



Movie Showtimes 

Plan 9 from Outer Space 

Playing at 3:00pm, 7:00pm. Special showing tonight at midnight，. 

Forbidden Planet 

Playing at 5:00pm, 9:00pm. 

<! doc type html> __ 



<html lang= n en"> 

<head> 

<title>Movies</title> 

</head> 

<body> 

<hl>Movie Showtimes</hl> 

<h2 id="movie1" >Plan 9 from Outer Space</h2> 
<p>Playing at 3:00pm, 7 : 00pm. 

<span> 

Special showing tonight at <em>midnight</em>! 
</span> 

</p> 

<h2 id= n movie2 M >Forbidden Planet</h2> 

<p>Playing at 5:00pm, 9 : 00pm.</p> 

</body> 

</html> 



POM iicv-c- 
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relationship between javascript and the dom 



Or, how two totally different technologies hooked up. 

HTML and JavaScript are from different planets for sure. 
The proof? HTML’s DNAis made of declarative markup 
that allows you to describe a set of nested elements that 
make up your pages. JavaScript, on the other hand, is 
made of pure algorithmic genetic material, meant for 
describing computations. 

Are they so far apart they can’t even communicate? Of 
course not, because they have something in common: the 
DOM. Through the DOM, JavaScript can communicate 
with your page, and vice versa. There are a few ways to 
make this happen, but for now lets concentrate on one— 
it’s a little wormhole of sorts that allows JavaScript to get 
access to any element, and it’s called getElementByld. 

Let’s see how it works... 
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javascript and the dom 


Let’s start with a DOM. Here’s a simple DOM; it’s got a few HTML paragraphs, each with 
an id identifying it as the green, red or blue planet. Each paragraph has some text as well. Of 
course there’s a <head> element too, but we’ve left the details out to keep things simpler. 




All is Nothing to All systems 

well report A-OK 


Now let’s use JavaScript to make things more interesting. Let’s say we want to change 
the greenplanet’s text from “All is well" to “Red Alert: hit by phaser fire ! 1 Down the road you 
might want to do something like this based on a user’s actions or even based on data from a 
web service. But well get to all that; for now let’s just get the greenplanet text updated. To do 
that we need the element with an id of greenplanet. Here’s some code that does that: 


V-CfV-CSCir\*ts Cir\*tlV"C m 

youV" bvowscv" 

so wc ask i*t 
*to do like -f md By\ element 




wcVc dskm^ *thc *bo 

us By\ clcr»\c^*t by 

elcr^c 灼七 matches id- 



document .getElementByld ("greenplanet 11 ) 



the favaya# element dov-v-espo^dmj 
*(jO W ^V"CCy\^l3ir\C*t ••• 



tKch the 
JavaSd\rip-t dodc 

do ^11 so\rts 

o-P i^tc\rcs-tmg 
thihgs with it. 
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using getelementbyid 


Once getElementByld gives you an element, you’re ready do something with it 

(like change its text to “Red Alert: hit by phaser fire!”). To do that, we typically assign the 
element to a variable so we can refer to the element thoughout our code; let’s do that 
and then change the text: 


IVlcVc dssi^'m^ *to d 

variable placet 


ou\r ddll "to 
^\cM seeks out 
demeyrt d^d v-cW^s it 


var planet = document.getElementByld("greenplanet") 


f[Y\d \Y\ OUV todt V/C 匕 a 的 Y\O^J jus*t 

use vav-iablc placet *to v-c-rcv- 
*to ouv- element 


planet.innerHTML : 

Cay\ use the 

•时扞丁亂 p^opev-ty o( 

财 pbhet cUat 4 

the ^ohichi of 
"the clcmcivt. ^ 

Well -talk move abou*t 
p\ropcv-*tics elements 
sho\rtly— 


"Red Alert: hit by phaser fire 

/ 

Vh *thc doir\*tc^*t o( *thc 

clcmcirrt *bo ouv Y\t^i *tc 乂 *t •• v/hidh results *m 
*thc VOM you\r pajc) bc'mj upda*tedl 
y/i*th *thc y\cvj *te 此 



Red Alert ： hit by 
phaser fire! 


Nothing to 
report 


All systems 
A-OK 


/\r>Y dha^^cs {jo -the POM a\rc rt(\ctitd m i\\t 
bvov/sev^s v*cy>dcv*iir>^ o^c so you II sec 七 

pavayaph *to 乙。灼 *tam Y\t^ 
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javascript and the dom 


i^arpen your pencil 


Here’s a DOM with a secret message 
hidden in it. Evaluate the code below to 
reveal the secret! The answer is upside 
down on this page. 

document. getElementByld ( n e7 n ) 
document. getElementByld ("e8 M ) 
document. getElementByld ("el6 M ) 
document. getElementByld ( n e9 n ) 
document. getElementByld ("el8 n ) 
document. getElementByld ("el3 M ) 
document. getElementByld ( n el2 ’▼) 
document. getElementByld ( n e2 n ) 

赂如如 cadV. Ime to At 

seiedts, as .ell as toM ^ 
ele-c-t reveal -essay 


t 





3.i4 


3e8 v) d-c 



IT 


+-I+I 



3HI- 


,KP! IH 
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testing the dom code 


Test drive the planets 琢 

You’ve seen how to use document. getElementByld to get access to 
an element, and how to use inner HTML to change the content of that 
element. Let’s do it for real, now. 

Here’s the HTML for the planets; we’ve got a 〈 script 〉 element in the 
head where we’ll put the code, and three paragraphs for the green, red, 
and blue planets. If you haven’t already, go ahead and type in the HTML 
and the JavaScript to update the DOM: 



l/Ve’ve added 

*to V^cad 


<!doctype html> 

<html lang= M en M > 

<head> 

<title>Planets</title> 

<meta charset="utf-8 n > 

<script> 

var planet = document.getElementByld("greenplanet") 
planet.innerHTML = "Red Alert : hit by phaser fire!" 
</script> 

</head> 

<body> 

<hl>Green Planet</hl> 

<p id= n greenplanet n >All is well</p> 

<hl>Red Planet</hl> 

<p id= M redplanet M >Nothing to report</p> 

<hl>Blue Planet</hl> 


Jus 七 like you sa>w bc-fov-c, >wcVc 
匕 ytt” 七 k <f> clem ⑶七 W\i\\ 
id w 5vccy>plair>c*t w a^d 



He\re’s -the <p> elemerrt 
you v-c -to 
v/i-th JavaStv-ipi. 


<p id= n blueplanet n >All systems A-OK</p> 
</body> 

</html> 


After you’ve got it typed in, go ahead and load the page 
into your browser and see the DOM magic happen on the 
green planet. 


UH 0W\ ttous*toy\, y/c ； vc jot a 

pyoblow) s*t>H 

sV^ows W AII is weir. 嶋 t’s 咖吒 ? 




A o o 

令 + C 舟 I O localho st/ 〜 Beth 川 TM L p ： 

Green Planet 


All is well 

Red Planet 

Nothing to report 


Blue Planet 
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javascript and the dom 



IVe triple-checked my 
markup and code, and this just 
isn*t working for me either. I’m not 
seeing any changes to my page. 


Oh yeah, we forgot to mention one thing. 

Most of the time it makes sense to start executing your 
JavaScript code after the page is fully loaded. The reason? 

Well, if you don’t wait until the page has loaded, then the 
DOM won’t be fully created when your code executes. In 
our case, the JavaScript is executing when the browser first 
loads the head of the page, and before the rest of the page has 
loaded, and so the DOM hasn’t been fully created yet. And, if 
the DOM isn’t created, then the <p id= M greenplanet"> 
element doesn’t exist yet! 

So what happens? The call to get the element with an id of 
greenplanet isn’t going to return anything because there is 
no matching element, and so the browser just keeps moving on 
and renders the page anyway after your code has run. So you’ll 
see the page rendered, but the text in the green planet won’t be 
altered by the code. 

What we need is a way to tell the browser “run my code after 
you’ve fully loaded in the page and created the DOM.” Let’s 
see how to do that next. 
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waiting for the page to load 


You caw't mess with the POM uwtil the 
page has fully loaded. 

But how do you tell the browser to execute your code only after it’s loaded? 

To tell the browser to wait before executing code we’re going to use two parts 
of JavaScript you haven’t seen much of yet: the window object, and a function. 
We’ll get to the details of both these later; for now，just go with it so you can get 
the code to work. 

Update your JavaScript code like this: 


<script> 


function init() { ^ 


p t v-s*t> dv-ca*tc a (\AY\ck\ov\ named 

•mrt and fut yoiA\r Codt 

•m tiic 


var planet = document.getElementByld("greenplanet"); 
planet.innerHTML = "Red Alert : hit by phaser fire!"; 


} ^ 


Kotidc i\\ai youv todt ^ocs 

{ By\A a 

dlosmg }• 


window.onload = init; 
</script> 


Reload the page 


fteve, v/cVc settmj value o-f 

This says v/h ⑶ is 

-fully loaded, c>ccdu*tc ihc 
todt "that is \y\ *mit 


•the y/mdoy/ o^lodd p\ropc\rty *to 

*fu 灼 d*tio 灼 ^ 


Go ahead and reload the page and see if you have the answer: 



Ycsf Moyj yjc see *thc 

<p> 七 ••七 yca"t? 


1 /Vclt y/ha 七 IS ydis 七七 ir>ov/ you 

kv>o>w \noY/ b> icll b\rov/scv *to 
urrtil *tV>C PO/^I V>3s dorwflctcly 
loaded bc-fovc \ruymm3 dodc 七 
addesses clcmcr>*U- 
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javascript and the dom 


'Sharpen your pencil 


ttcvc^s *thc WTML 

<! doctype html> Jf 0 \r i\\t 阿 . 


<html lang="en M > 

<head> 

<title>My Playlist</title> 
<meta charset= M utf-8 n > 
<script> 

_ addSongs() { 


Here’s some HTML for a playlist of songs, except that the list is 
empty. It's your job to complete the JavaScript below to add the 
songs to the list. Fill in the blank with the JavaScript that will do 
the job. Check your answer with our solution and the end of the 
chapter before you go on. 



Hercs our TW.s Code should 以 U 

r»st S 。 呼 kclov/, m <ul>. 


var songl = document. 


var 


var 


Pill m 七 he blanks v/i-th "the rwiss’mg 
Code b> gc-t -the playlist -Pilled out 


.getElementByld ('▼ 


)； 


•innerHTML = "Blue Suede Strings, by Elvis Pagely"; 
_ = "Great Objects on Fire, by Jerry JSON Lewis"; 


song3. 


= n I Code the Line, by Johnny JavaScript ”； 


window. 


</script> 

</head> 

<body> 

<hl>My awesome playlist</hl> 


<ul id= n playlist M > 

<li id= n songl n X/li> 
<li id= n song2 n X/li> 
<li id= n song3 n X/li> 
</ul> 

</body> 

</html> 


Wtrts cmfty list so 呼 .Tk 

(,0&t dboVC Should ddd £>0 灼七 € 灼七 "to 

<l>> 




W\\tY\ you yt 七 he f 

JavaSdvift v/ov-km^, 七 his is 
>wha 七 {ht v/cb Will look 

like you I odd 七 he fay. 





My awesome playlist 

• Blue Suede Strings, by Elvis Pagely 

• Pi 0 !! ° bjccts on Firc * b X Jc ^y JSON Lewis 

• 1 Code the Line, by Johnny JavaScript 
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more dom functionality 


So, what else is a POM good for awyway? 

The DOM can do a fair bit more than we’ve seen so far and we’ll be using 
a lot of its other functionality as we move forward in the book, but for now 
let’s just take a quick look so you’ve got it in the back of your mind: 


L-ook up 
v-c*bv"»cvc ov\t ov 
move 



C^rcaic hew 
clcmCh-ts... 



... sy\d add them 
*to DOM 
by 

*to av>o*tKcv 

brtt- 

Remove 

elements. 




Get elements from the DOM. 

Of course you already know this because 
weve been using document.getElementByld, 
but there are other ways to get elements 
as well; in fact, you can use tag names, class 
names and attributes to retrieve not just 
one element, but a whole set of elements 
(say all elements in the class 、 'on 」 ale〃). 

And you can get form values the user has 
typed in, like the text of an input element. 

Create or add elements to the DOM. 

You can create new elements and you 
can also add those elements to the DOM. 

Of course, any changes you make to the 
DOM will show up immediately as the 
DOM is rendered by the browser (which 
is a good thing!). 


Remove elements from the DOM. 

You can also remove elements from the 
DOM by taking a parent element and 
removing any of its children. Again, 
youll see the element removed in your 
browser window as soon as it is deleted 
from the DOM. 


A^^css ov 
CXtdi^t ^V\ 

aii\ribu-tc o( 
like id o\r ddss 

a 



Get and set the attributes of elements. 

So far youve accessed only the text content 
of an element, but you can access attributes 
as well. For instance, you might want to know 
what an element's class is, and then change 
the class it belongs to on the fly. 
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javascript and the dom 


Caw we talk about JavaScript again? Or, 
how to store multiple values m JavaScript 


You’ve been hanging right in there with JavaScript and the DOM, and before we let you 
get some rest and relaxation, we wanted to tell you about one more JavaScript type that 
you’ll use all the time — the Array. Let’s say you wanted to store the names of thirty-two 
ice cream flavors or the item numbers of all the items in your user’s shopping cart or 
maybe the outside temperature by the hour. To do that with variables would get awkward 
fast, especially if we need to store tens, hundreds or thousands of values. Luckily, we’ve 
got the Array to help out. 

You cby \ add move 

a^av V^olds a d values.-v val ^ s 户 ， a ^ a Y 

1 \ as needed. 


Eddh vdluc d mdc/- 
K>urwbc\r, s*ta\rtijr^ v/rth 



z«v-o. 

>_0 12 3 4 




^\y\A (or cvcv-y *mdc% 

•m 七 he av-v-ay, ihtrts a 
dovvesfo^dm^ value- 


Howto create aw array 


We need to create an array before we use it, and we need to assign the array 
itself to a variable so we have something to refer to it by in our code. Let’s 
create the array above with hourly temperatures: 


ttevVs ouv* vav'iablc 
-fov 3v-vay . 


… 3hd how wc actually 

a hew empty av-v-ay. 


Well Cotrxt bddk *to "this syjrrtax ih 
Chaptev ■ 午 ， but -Po\r y \ o ^ i , just k^oy/ 
that ii a av-vay. 


var tempByHour = new Array(); 
tempByHour[0] = 59.2; 
te m p By Hou r[1] = 60 . 1； ^ 

lo add values h> -the av-vav, >/c jus-t 

tempByHour [2] = 63; ^umbev- o\ the av-vay 


tempByHour[3] 
tempByHour[4] 

The mdc 乂 




65; 

62; 


| 七加 ， and give i*t a value. 

Jus*t like a variable m JavaS^v-ip*t you csy\ assi^ a^y value 
(ov- -type value) *bo by\ av-vay 


Or, if you’re really in a hurry, JavaScript gives you a shortcut to type in an 
array (what we call a “literal array”）to create and intialize it with values: 



var tempByHour = [59.2, 60.1, 63, 65, 62]; 




This dv-catcs -the sarwe a\r\ray as 
above, jus-t y/rth a lo*t less todt- 
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using an array 


Adding another item to the array 


At any time you can keep adding new items to your array simply by using 



Using your array items 

You can get the value of an array item just by referencing the array 
variable with an index, like this: 



var message = "The temperature at 5 was 
alert(message); 


’▼ + tempByHour [5]; 

To addess value -the 
*tcmpc\ra*tu\rc a*t ^ v/c jus 七 
v-c-fcv-c^dc the av-v-ay a*t mdc 乂弓 . 


Know the size of your array, or else 


You can easily get the size of your array by referring to a property of the 
array called length: 


var numl terns 


tempByHour.length; 



-talk mov-c about properties *m i\)t 
diiaftcv -； (or y\o^i, jus 七 k 灼 ov/ 七 ha 七 
cvevy av~v~ay hds *tK*is pvopev-ty 
*tclls you v>umbcv* o( rtems m 七 he 3V"V*3y. 


And now that we know how to get length of an array, let’s see if we 
can combine what you know about loops with arrays... 
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i^arpen your pencil 


javascript and the dom 


Below you'll find a web page with a list of empty items ready for your JavaScript to fill in 
with temperatures. We’ve given you most of the code; it’s your job to finish it up so that 
it sets the content of each list item to the corresponding temperature from the array (e.g. ; 
the list item with id = “tempO” will get the temperature at index 0 in the array, and so on). 
So, list item with id = “temp3” will read, “The temperature at 3 was 65”_ For extra credit, 
see if you can figure out how to get the temperature at 0 to read “noon” instead of 0. 


<!doctype html> 

<html lang= n en n > 

<head> 

<title>Temperatures</title> 
<meta charset= n utf-8 n > 
<script> 

function showTemps() { 

var tempByHour = new _ 

tempByHour[0] = 59.2; 
tempByHour[1] = 60.1; 
tempByHour[2] = 63; 
tempByHour[3] = 65; 
tempByHour[4] = 62; 

for (var i = 0; i < _ 

var theTemp = _ 

var id = "_ 

var li = document •一 

if (i == _) { 

li._ 

} else { 


4^ 


rtcvc S WTMU 


[i ]； 


(id); 



Hcv-c^s loops 

ar\A avv-ays. Car> you see hoy/ >wc v-c 
addess'm^ rtem m 七 he av-vay 
us'm^ a vav-*iablc mdc%? 


The temperature at noon was 


theTemp; 


li.innerHTML = "The temperature at 


was 


window.onload 


showTemps 


</script> 

</head> 

<body> 

<hl>Temperatures</hl> 

<ul> 

<li id= n tempO n X/li> 
<li id= M tempi n X/li> 
<li id= n temp2 n X/li> 
<li id= n temp3 n X/li> 
<li id= n temp4 n X/li> 
</ul> 

</body> 

</html> 


« o o 


Temperatures 


-- \ ^ --_■ emperdtures 

(q ： 


Coogle 】 


The todt above y/ill 
•fill m list 你 

v/rth a phv-asc v/*rtK 
七 k *tcmfcv-a*tu\rc. 


Temperatures 


The temperature at noon was 59.2 
The temperature at 1 was 60.1 
The temperature at 2 was 63 
The temperature at 3 was 65 
The temperature at 4 was 62 
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phrase-o-matic example 


Chctk ou-t this Code -Pov- -the 
ho 七灼 ew Phvasc-o-Ma-tid app 
dr\d sec i-f you d 扣 -Pijuve oui 
what it does bc-Po\rc you Jo or>... 


<!doctype html> 

<html lang="en M > 

<head> 

<title>Phrase-o-matic</title> 

<meta charset="utf-8 M > 

<style> 
body { 

font-family: Verdana, Helvetica, sans-serif; 

} 

</style> 

<script> 

function makePhrases() { 

var words1 = ["24/7", "multi-Tier", "30,000 foot",' 
var words2 = ["empowered", "value-added", "oriented 1 
var words3 = [ ， ’ process” ， ’ ▼solution” ， M tipping-point' 



You didn’t think our serious business 
application from Chapter 1 was serious 
enough? Fine. Try this one, if you need 
something to show the boss. 


B-to-B", "win-win"]; 

,"focused", "aligned"]; 


strategy' 


’vision”]; 


var randl = Math.floor(Math.random() * words1.length); 
var rand2 = Math.floor(Math.random() * words2.length); 
var rand3 = Math.floor(Math.random() * words3.length); 


var phrase = words 1 [randl] + n n + words2 [rand2] + '▼ '▼ + words3 [rand3]; 
var phraseElement = document.getElementByld("phrase"); 
phraseElement.innerHTML = phrase; 

} 

window.onload = makePhrases; 

</script> 

</head> 

<body> 

<hl>Phrase-o-Matic says:</hl> 

<p id= n phrase n X/p> 

</body> 

</html> 
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The Phrasc-O-Matic 

We hope you figured out this code is the perfect tool 
for creating your next start-up marketing slogan. It has 
created winners like “Win-win value-added solution” 
and u 24/7 empowered process” in the past and we have 
high hopes for more winners in the future. Let’s see how 
this thing really works: 

First, we define the makePhrases function, which we run after the page has fully 
loaded so we know we can safely access the DOM: 

iVcVc dc-f'm'mj a 

makcPhvascs, -that >/c tBy\ 匕 all la*tcv-. 

function makePhrases() { 

AH Code -fov- makcPhv-ascs joes hcv-c, v/cll 5C*t *to i*t d scd *. 

window. onload = makePhrases; 匕 ^ Wlc nr»akcPh\rascs Bs sooy\ 

as -the pajc is doY\c loading. 



② With that out of the way we can write the code for the makePhrases function. Let’s start 
by setting up three arrays. Each will hold words that we’ll use to create the phrases. We’ll 
use the short cut for creating these arrays: 


\Mt trcaic a variable v/ov-dsl , 七 ha 七 

use *bo vc-fcvciadc i\\t avvay. 


>MC 


var words1 = [ n 24/7 n , "multi-Tier", n 30,000 foot ”， n B-to-B n , "win-win"] 

^ 1/VcVc -five sVmy *m i\\t ar\ray. Feel *to 

cMdiY\^c tKcsc *to i\\t \aitsi buzz.>wo\rds ou 七 


var words2 = ["empowered", "value-added", "oriented", "focused", "aligned"]; 
var words3 = ["process", "solution", "tipping-point", "strategy", "vision"]; 




hc\rc 3VC "two rwoirc ainrays o( y/o\rds, dssi^ed 
"to iwo y\c>n variables, y/o\rdsZ a^d v/ovds3. 
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how phrase-o-matic works 


Okay, we’ve got three new arrays of nice buzzwords; now, what we’re going to do is 
randomly choose one word from each, and then put them together to create a phrase. 

Here’s how we choose one word from each array: 



Wc ^o\r Cddh i*t "to 3 

w/ variable ray\dZ, ar\d \-av\di v-cspcd*tivdy). 


var 

var 

var 


randl = Math.floor(Math.random() * words1.length); 
rand2 = Math.floor(Math.random() * words2.length); 
rand3 = Math.floor(Math.random() * words3.length); 





"This toAt ^ va^dorw ^ur^bcv* based on the o( i'tcrws *m eddh away 

(’m ouv cast -five, but -Peel -Pvcc to add io a^y array, it will still y/o^-k). 


Now we create the slick marketing phrase by taking each randomly choosen word 
and concatenating them all together, with a nice space in between for readability: 

IVc use tBCM va^dom y^umbev- *fco 

後 variable Ud P Wase- ^ wed 針平 •• 

var phrase = words1[randl] + " " + words2[rand2] + " M + words3[rand3]; 


We’re almost done, we have the phrase, now we just have to display it. By now you 
already know the drill: we’re going to use getElementByld to locate our paragraph 
element and then use its innerHTML to put the new phrase there. 


^^ Wc <Y> ^\i\\ 

var phraseElement = document. getElementByld ("phrase n ) ; id “pWase . 

phraseElement.innerHTML = phrase; 



Thch wc set the dohtch-t o-f 
the <p> dcmcht -fco the phrase. 
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Okay, finish that last line of code, have one more look over it all 
and feel that sense of accomplishment before you load it into your 
browser. Give it a test drive and enjoy the phrases. 


rtcvcs ouV " s 
looks like! 




Phrase-o-matic 


< 

+ 

0 http://localhost/-Beth/Head-First-HTML5/chapter2/phrase.html C (Oj Google 




Phrase-o-Matic says: 


B-to-B focused vision 


_ A 

T ^load -the page -Po\r Chdlcss sta\rt-up possibilities 
L (okay , ⑽ 七 Chdlcss, bu-t wov-k wi-th us wcVc 
t^ryihg -to make this simple CoAt oeditmg/). 


tJiereiare no o 

Dumb Questi9ns 


What exactly is Math, and what do 
Math.random and Math.floor do? 

Math is a built-in JavaScript library that 
has a bunch of math-related functions in it. 
Math.random generates a random number 
between 0 and 1. We multiply that by the 
number of items in the array (which we get 
using the length property of the array) to 
get a number between 0 and the length of 
the array. The result is likely to be a floating 
point number, like 3.2, so we use Math.floor 
to make sure we get an integer number that 
we can use as an index into the array to 
pick the random word. All Math.floor does is 
drop the numbers after the decimal point in 
a floating point number. For example, Math. 
floor(3.2) is 3. 

Where can I find documentation on 
things like Math? 


A great reference for JavaScript is 
JavaScript: The Definitive Guide by David 
Flanagan (O'Reilly). 

Earlier you said that you can 
store primitives (like number, string and 
boolean) in variables or objects. But 
we’re storing arrays in variables. So what 
is an array, a primitive or an object? 

Good catch! An array is a special 
kind of object that’s built into JavaScript. 

It’s special because you can use numerical 
indexes to access the values stored in the 
array, something you can’t do with other 
(non-array) objects, or objects that you 
create yourself. You’ll learn how to create 
your own objects in Chapter 4. 

What happens if I try to access an 
array index that doesn’t exist? Like if I 
have 5 words stored in myWords and I 
tried to access myWords[10]. 


You get undefined, which, if you recall, 
is the value of a variable that hasn’t been 
assigned a value yet. 

Can I remove an item from an 
Array? If so, what happens to the index of 
the other elements? 

You can remove an item from an Array, 
and you can do it a couple of different ways. 
You could set the value of the array at the 
index to null; for example, myArray[2] = null. 
But that would mean the length of the Array 
stays the same. Or you can remove the 
item altogether (using the function splice). 

In that case, the indexes of the items that 
come after the one you remove will all shift 
down by 1. So if myArray[2] = “dog” and 
myArray[3] = “cat”, and you remove “dog”, 
then myArray[2] = “cat” and the length of 
your array is 1 shorter than it was. 
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Learning a language is hard 
work and it requires you not only 
work your brain, but that you also rest 
your brain. So after this chapter take 
some well needed downtime, have a treat 
on us, but before you go, check out the 
bullet points and do the crossword to 
make things really stick. 


o 




Wc have 灼 ’ 七 -Pigu\rcd 

oui 七 he digital -to 
do^vcv-sio^ 
yci, so youll y\ttd 
"to supply youv ovm 
v-cal iv-ca-ts. 
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BULLET POINTS - 

■ Declare a JavaScript variable using var. 

■ Number, boolean and string are primitive 
types. 

■ Boolean values are true and false. 

■ Numbers can be integers or floating point 
numbers. 

■ An unassigned variable has the value 
undefined. 

■ Undefined and null are two different values. 
Undefined means a variable hasn’t been 
assigned a value; null means the variable has 
the no value. 

■ Numerical, boolean and string expressions 
result in a number, a boolean, ora string 
value respectively. 

■ To repeat blocks of code, use a for or a while 
loop. 

■ For loops and while loops can do the same 
thing; use whichever one works best for the 
situation. 

■ To end a for or while loop, the conditional test 
must be false at some point. 

■ Use if/else statements to make a decision 
based on a conditional test. 

■ Conditional tests are boolean expressions. 

■ You can add JavaScript to the head or body 
of your web page, or put it in a separate file 
and link to it from your web page. 

■ Enclose your JavaScript (or link to it) using 
the <script> element. 

■ When the browser loads a web page, it 
creates a Document Object Model (DOM), 
which is an internal representation of the web 
page. 


■ You make your web pages interactive by 
examining and changing the DOM using 
JavaScript. 

■ Get access to an element in your web page 
using document.getElementByld. 

■ document.getElementByld uses the id of an 
element to find the element in the DOM. 

■ Use the innerHTML property of an element to 
change the element’s content. 

■ If you try to access or change elements 
before the web page has completely loaded, 
you’ll get a JavaScript error and your code 
won’t work. 

■ Assign a function to the window.onload 
property to run the code in that function after 
the browser has finished loading the web 
page. 

■ Use an array to store more than one value. 

■ To access a value in an array, use an index. 
An index is an integer number that is the 
position of the item in the array (starting at 0). 

■ The length property of an array tells you how 
many items are in the array. 

■ By combining loops and arrays, you can 
access each item of an array sequentially. 

■ Math is a JavaScript library with several math- 
related functions in it. 

■ Math.random returns a floating point number 
between 0 and 1 (but never 1 precisely). 

■ Math.floor converts a floating point number to 
an integer by dropping all the digits after the 
decimal point. 
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crossword exercise 



HTMLSCross 


Time to work a different part of your brain with a 
crossword. Have fun! 



Across 

2. 5 < 10 is a_expression. 

7. You can add your JavaScript to the_or body of 

your HTML. 

8. _is the root of the DOM tree. 

9. Variables start with a_, $ or 

10. The DOM is an internal representation of_. 

11. Use an_to get a value from an array. 

12. Pick good names and use_case for long names. 

13. If you write 3 + “Stooges”，JavaScript will_3 

into a string. 

15. Store all your ice cream flavors together in one_■ 

16. Do things again and again with a_loop. 

17. You know how many items are in an array if you check 

the_■ 

18. document._is how you get an element 

from the DOM in JavaScript. 


Down 

1. While and for loops use a_expression as a 

conditional test. 

3. The browser builds a Document_when it 

loads a page. 

4. The id of the planet hit by phaser fire. 

5. Add this to make your web pages interactive. 

6. Enclose your JavaScript with a <_> tag if it’s in 

an HTML page. 

14. If you’re almost done, drink tea,_not even 

close, keep working! 

19. Don’t mess with the_until the page has fully 

loaded. 
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Express Yourself! 

You’ve seen the different types of 
expressions you can use in JavaScript, 
now it’s time to put that knowledge to work 
by evaluating some expressions yourself. 
Here’s our solution. 


(9/5) * tempC + 32 

What’s the result when tempC is 10? 


"Number" +，▼，▼ + n 2 M 

What’s the resulting string?_ Z 


level >= 5 

What’s the result when level is 10?__ >=： *, s w yca*tcv- 

How about when level is 5? 七 ov c<\ual *to 


color != "pink" 

What’s the result if color is “blue ”？ 


dolov* W is y>o 七 
*to fmk 


(2 * Math.PI) * r 

What’s the result if r is 3? 



Alath Pf gi 

pi (you 


you the value 
khow, 午 … .） 


apfv-o%*ima*tcly! 



this kihd o-f CX.pv*cssioh^ 


javascript and the dom 

_l ， 


參 Sharpen your pencil 


Based on what you know so 
far about JavaScript variables, 
expressions and statements, see 
if you can figure out which of 
these are legal and which might 


cause an error. 


From the following list, circle the 
statements that are legal. 





^ var n = 3 


one ，'； 


Tc^^'itally, oY\t »s Icjal, 
but vcsults m d value you 
use. 



var t = "one' 


two 




var 3po = true; illegal! 


(var 


level = 


^varhighNoon = false' 
var $ = 21.30 



z y 


； •llqal! 



while (highNoon) 


z 
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exercise solutions 


t BE 酬猶 §©]iig©n 

Each of ike JavaScript snippets on 
this pa^e is a separate piece of code. 

Your job is to play browser, and 

- 」 evaluate each snippet 

of code and answer a 
question about tiie result. 
Write your answer to tire 
question below tire code. 

2 

var tops = 5; 

while (tops >0) { 々 

for (var spins = 0; spins < 3; spins++) 
alert("Top is spinning !”）； 

} 

tops 





var count = 0; 
for (var i = 0; i < 5; i++) 
count = count + i; 

} 

alert("count is M + count); 

l/Vhai docs -the alcv-t show? 

^ 10 


UeM time loop, wcVc 


*bWou# 

: value o\ \ 


value ok I *to 
a^d I is md\rcas'm3, so >mcVc v\oi 
jus 七 addim^ I *to towrrt 
*bWou^) bu*t O, I) 2-> ^>) 


tops - 1; 


15 


How -times do you sec 
七 he alc\rt, u 7op is sp’nrmm#’? 


The ou*tcv* while loop v-u^s *7 times, 
By\A the (or I oof v-u^s Z 
times eadh time thv-oujh *thc outer 
loof, so the -total is ^ ^ 1>, oy l^l 

§i«^e{ 3 


for (var berries = 5; berries > 0; berries--) 
alert("Eating a berry"); 


^ a i ^ ahd 

loopihg uh-til belies is O, douh-tma 
doWh ^ tiw Usi ca d up). } 

How rndr^Y bevvies did you ca*t? ^ ? 




for (scoops = 0; scoops < 10; scoop++) { 
alert("There's more ice cream!"); 






alert("life without ice cream isn't the same"); 


10 


ttow many sdoofs o-f \ttOrt^ti\ did you cat? 
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SoLvtiort 


Take the code above and insert it into the code below. Walk through the while 
loop and write down the alerts in the sequence they occur. Here’s our solution. 


|r\sc\rtcd CoAt 


var scoops = 10; 

while (scoops >= 0) { 

if (scoops == 3) { ^ 

alert("Ice cream is running low!"); 
} else if (scoops > 9) { 


TWis haffChS OTiCt) Stoops IS ?>. 




sdoo^s is 2-> l> 


This also happens 

alert("Eat faster, the ice cream is going to melt! n ) ; when sdoops is 
} else if (scoops == 2) { 
alert("Going once! n ); 

} else if (scoops == 1) { 
alert ("Going twice! '▼); 

} else if (scoops == 0) { 
alert ("Gone! '▼); 

} else { 

alert ("Still lots of ice cream left, come and get it. ") ; 


f[Y\d this hafp ⑶ s y\oy\C the oihev- 乙 。灼 di*tio 吣 

is *t\ruc, that is, sdoofs is % 1, ^>, 


scoops = scoops - 1; 


I/Ve sub*bra^t I sdoop eddh -tir^c -thvoujh the loop- 


alert ("Life without ice cream isn't the same."); 


TWis is \run a-fW loop is (W. 


TKc alerb: 



Eat faster 
Still lots 
Still lots 
Still lots 
Still lots 
Still lots 
Still lots 


,the ice cream is going to melt! 


of 

ice 

cream 

left, 

come 

and 

get 

it. 

of 

ice 

cream 

left, 

come 

and 

get 

it. 

of 

ice 

cream 

left, 

come 

and 

get 

it. 

of 

ice 

cream 

left, 

come 

and 

get 

it. 

of 

ice 

cream 

left, 

come 

and 

get 

it. 

of 

ice 

cream 

left, 

come 

and 

get 

it. 


Ice cream is running low! 
Going once! 


Going twice! 


Gone! 

Life without ice cream isn't the same. 
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Code Magnets Solution 


This code prints out a well-known palindrome in an alert. The problem is that some of 
the code was on fridge magnets and fell on the floor. It’s your job to put the code back 
together again to make the palindrome work. Watch out; we put a few extra in, and 
you’ll have to use some of the magnets more than once! Here’s our solution. 


var wordl : 
var word2 : 
var word3 : 
var word4 : 
var word5 : 

var phrase 


V V • 

f 

nam M ; 
nal p n ; 
lan a c"; 
a man a p' 




http：//localhost 

a man a plan a canal panama 




i = o ； n^~i 


for (var i 

if (i == 0) 
phrase 


else if (i == 1) 
phrase = 





word4 



+ word2 + wordl 


alert(phrase); 



el ^J 


OK 



fi ^alrndv-ome is a s 伙七 ⑶ de *tha 七 
be vedd 七 he same way badkwavds 
ar)d -pov-y/avds| Hcvc^s ihe falmdvomc 
you should see i-P 3V*C all 

•m *tKc vi^vt fladcs. 


i == 4 | 

word2 \ - , 



word4 1 i < 

3 1 

wordO 1 

i = 



i 


Lc-f-tovcv 


「 word3 I 
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现如 Browser 

Solufcioti 

Your job is tbe act like 
you ? re tbe browser. You 
need to parse the IfTML 
and build your very own 
DOJVl from it. Go ahead 
and parse the HTML to 
the rigk, and draw your 
DOJVl below. WeVe already 
started it for you. 


<!doctype html> 

<html lang= n en"> 

<head> 

<title>Movies</title> 

</head> 

<body> 

<hl>Movie Showtimes</hl> 

<h2 id="moviel n >Plan 9 from Outer Space</h2> 
<p>Playing at 3:00pm, 7 : 00pm. 

<span> 

Special showing tonight at <em>midnight</em>! 
</span> 

</p> 

<h2 id= M movie2 M >Forbidden Planet</h2> 

<p>Playing at 5:00pm, 9 : 00pm.</p> 

</body> 

</html> 



Movie Showtimes 

Plan 9 from Outer Space 

Playing at 3:00pm, 7:00pm. Special showing tonight at midnight] 

Forbidden Planet 

Playing at 5:00pm, 9:00pm. 





document 



Hcv-c^s ouv V0M 



hi I 


h2 id=〃movier 


I 里 


h2 id=’’movie2 ‘ 


I H 


span I 


em I 
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exercise solutions 


Sharpen your pencil - 

Here’s some HTML for a playlist of songs, except 
that the list is empty. It was your job to complete the 
JavaScript below to add the songs to the list. Our 
solution is below. 

<!doctype html> 

<html lang= M en M > 

<head> 

<title>My Playlist</title> 

<meta charset= n utf-8 n > 


- - My Playlist 

C (Q-Get""' » 

My awesome playlist 


Blue Suede Strings, by Elvis Pagely 
p 二 eat Objects on Fire, by Jerry JSON Lewis 
I Code the Line, by Johnny JavaScript 



l*P you yt "the Jav/aSfirip 七 y/oirkmj, 七 his is "the 
y/eb pajc v/ill look like a-r-tev you load 七 he pay. 


<script> 

var songl 
var so^gZ 
var 


addSongs() { 

=document. ^g'fcElgr^gh'fcByldi ( M soh^l 
= do 匕 ( M so^gZ 
= dodurnght . getElementByld ( M 


^^^ *thc todt 七 Will 

make 七 he playlist v/ov-k. 


so— • innerHTML 

soh^ZihhgrHTML 

song3. irmerUTML 

} 

window. ohlodd = 



Blue Suede Strings, by Elvis Pagely"; 

Great Objects on Fire, by Jerry JSON Lewis"; 
I Code the Line, by Johnny JavaScript"; 




3ddiSoy\y 


Fed -Pv-cc bo subsii-tuic 
youv- -favov-i-tc so^gs/ 


</script> 


</head> 


<body> 

<hl>My awesome playlist</hl> 


<ul id="playlist M > 

<li id="songl"X/li> 
<li id="song2 n X/li> 
<li id="song3 n X/li> 
</ul> 


TKc todt above sets 七 he 
toY\{,tY\i o( iiicsc <li> elements 
by yabb” eadii clcmc^-t -fv-om 
{\\t VOM div\A *tiic 

•lymCvHTAIL *to *thc SO% v>amc. 


</body> 

</html> 
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/ Sharpen your pencil 


<!doctype html> 

<html lang= n en n > 

<head> 

<title>Temperatures</title> 
<meta charset="utf-8 n > 
<script> 

function showTemps() { 

var tempByHour = new 


Below you'll find a web page with a list of empty items ready for your 
JavaScript to fill in with temperatures. We gave you most of the code; 
it was your job to finish it up so that it set the content of each list item 
to the corresponding temperature from the array. Did you get the extra 
credit? Our solution is below. 


AvrayO 


tempByHour[0] 


59.2; 

tempByHour[1] 

= 

60.1; 

tempByHour[2] 

= 

63; 

tempByHour[3] 

= 

65; 

tempByHour[4] 

= 

62; 

for (var i = 

0; 

i < 


y/cVc a ^ 

{jo V^oia *tKc 


； i++ 


var theTemp = -fcgimpByHour [i ]; 

var id = M tgi^p _" + i ; 

var li = document. _ (id); 

if (i == 0 ) { 

li. mhg\rHTA1L _ = "The temperature at noon was 

} else { 


>whcvc v/cVc loops a^d 

avv^ys. Notice 1 io\m v/cVc us'm^ i 3s 七 he 
*mdc% m*to *tV>c av-vay, so well BCtess 
eadV> as I mdvc3scs m tdiCM loop. 


theTemp; 


li.innerHTML = "The temperature at 


+ 


u 


was 


H 


+ thglgimp 


heve v/cVc dv-catmj the s-tv-mj bo 
use, us'mj the vaviablcs i a^d -thcTcrwp. 


window.onload = showTemps 

</script> 

</head> 

<body> 

<hl>Temperatures</hl> 

<ul> 

<li id= n tempO M X/li> 
<li id= n tempi M X/li> 
<li id= n temp2 M X/li> 
<li id= n temp3 M X/li> 
<li id= n temp4 M X/li> 
</ul> 

</body> 

</html> 


« o o 


—-_ Temperatur es 

IQJ LLill!!gP7/tocalhost/^Bpfh/M 0 ^.' 




/Ud 


ouv- \rcsul*ts. 


Temperatures 


參 


The temperature at noon was 59.2 
The temperature at 1 was 60.1 
The temperature at 2 was 63 
The temperature at 3 was 65 
The temperature at 4 was 62 



--- 
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HTML5Cross Solution 
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3 events, handlers and all 

+ A Little Interaction ^ 



You still haven’t reached out to touch your user. 

You’ve learned the basics of JavaScript but can you get interactive with 
your users? When pages respond to user input, they aren’t just documents 
anymore, they’re living, reacting applications. In this chapter you’re going 
to learn how to handle one form of user input (excuse the pun), and wire 
up an old-fashioned HTML <form> element to actual code. It might sound 
dangerous, but it’s also powerful. Strap yourself in, this is a fast moving 
to-the-point-chapter where we go from zero to interactive app in no time. 


this is a new chapter 



introducing webville tunes 


fret ready for Webville Tuwcs 

Okay, we’ve dragged you through a lot of JavaScript fundamentals 
so far in this book, and while we’ve talked a good game on building 
web apps, we don’t have a lot to show for it, yet. So, now we’re 
going to get serious (no really! we mean it this time!) and build 
something real world. 

How about a playlist manager. We’ll call it something original, 
like... hmm, say Webville Tunes. 



Add sov\^s 



Webville Tuines 


|0 

' Add Song"' 


Song name 


wis 


Blue Suede Strings, by Elvis Pagely 
Great Objects on Fire, by Jerry JSON Le 
Code the Line, by Johnny JavaScript 
Thafll be the Data, by Buddy Bitly and the Variables 

your Random Heart, by Hank rr Math rf WHH ⑽ s 


Displays all youv- 
-Pavoviic Webville 
v-ijh-t ih the b\rov/sc\r. 




l/Vhat v/cVc Jomg -to build. 


C Completely bv< 


•ov/sev 一 based. 
|^o sewev-side dodc 
needed ov \rc«\uivcd- 





Given what you know about this code: 


window.onload = init 


Can you guess what this code might do? 


button.onclick = handleButtonClick; 
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events and handlers 


ftettmg started... 

We don’t need to create a big, complex web page to get this started. In fact we 
can start very simply. Let’s just create an HTML5 document with a form and 
a list element to hold the playlist: 


Just youv sta^davd HTML^ had ad body- 


<!doctype html> 

<html lang= n en n > 

<head> 

<title>Webville Tunes</title> 

<meta charset= n utf-8 n > 

<script src= n playlist. js"X/script> 

<link rel= n stylesheet" href= n playlist.css n > 
</head> 

<body> 



WicVe *to be putt” all ouv 
JavaSoft rn i\\t playlistjs file- 

Wc'vc mdluded d stylesheet *to 5'wc ou\r 
playlist app a look f -feel- 

/\|| y/C Y\tcd is a simple -foVm. ttcv-C i*t is with B 
-field *to type \y\ youv- so^js. WcVc us'mj the 
HTML 1 ? fladcholdcv- attv-ibu-tc -that shov/s 
o( what *to type m -the mpu 七 -field- 


<form> 

<input type= M text" id= n songTextInput" size= M 40 n placeholder:’▼ Song name n > 
<input type="button" id= M addButton M value="Add Song"> 

</form> 


(\c >*t a button 


<ul id= n playlist n > 


</ul> 

</body> 

</html> 


1/VlcVc jo'mj {jo use B lis-t (or *thc 
so^js. Foir y\o^i its erwp-ty, but 
well "that with JavaSdvip-t 
Code \y\ a set... 


y/c jo*t a 

idc^f w aaai 


wi*th By\ id o4 - w addBu*t*fco^ w 

bo submit youv y\c^ 
additions *to playlist 


Wve it a test drive 琢 

Go ahead and type in the code above, load it into your favorite 
browser and give it a spin before moving on to the next page. 


HevVs you should see- 



^ ^ ^ Webville Tunes 

◄ 

+ J0 http://localhost/~Beth/HTML5/JavaSc <5 | (A, Google \j 

1 _ __ 

[Song name 


〔Add Song 



* Rcrwcrwbcv you dov/nlodd "the s-tylcshcct (and all -the fiodc) -Pvorw h-ttf : / / Widkcdlysr»»av (： dor»»/h-(-h-( ： r»»l^ 
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about button click events 


Put nothing happens when I click "Add Sowg" 

Well, yes and no. Nothing appears to happen, but your browser knows you clicked on 
the button (depending on your browser, you will also see the button depress). 

The real question is how do we get the button to do something when you click on it? 
And what that question really means is, how do we get some JavaScript code invoked 
when you click on a button? 


We need two things: 

① We need a bit of JavaScript code that 
will get evaluated when the user clicks 
on the w Add Song" button. This code 
will (once weve written it) add a song to 
your playlist. 

② We need a way to hook up that bit of code so 
that when the button is clicked, JavaScript 
knows to run your w add song" code. 



When the user clicks (or touches 
on a gesture-based device) a 
button, we want to know about it. 
We’re interested in the 
“ button was just clicked event ”• 
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events and handlers 


Hey, I’m really interested 
in you, button... could you 
let me know if anyone 
clicks on you? 




v\ 


j 




Vouv Codt- 


Great, you’ll be the first to know 
in the event that happens. 


O 


o 


■^Add Song~) 



K 


Vouir butio 灼 . 


Handling Evewts 


You’re going to see that many things are happening in the browser 
while your page is being displayed — buttons are being clicked, 
additional data your code requested from the network may be 
arriving, timers may be going off (we’ll get to all that). All these 
things cause events to happen, a button click event, a data available 
event, a time expired event, and so on (there are many more). 

Whenever there is an event, there is an opportunity for your code 
to handle it] that is, to supply some code that will be invoked when 
the event occurs. Now ， you’re not required to handle any of these 
events, but you’ll need to handle them if you want interesting things 
to happen when they occur — like, say, when the button click event 
happens, you might want to add a new song to the playlist; when 
new data arrives you might want to process it and display it on your 
page; when a timer fires you might want to tell the user their hold 
on front row tickets is going to expire, and so on. 


So, we know we want to handle the button click event, let’s see how 
we do that. 
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coding the button handler 


Making a Plan 


Let’s step back for a second before we lose ourselves in handlers and events. 

The goal here is to click on “Add Song” and have a song added to a playlist on 
the page. Let’s attack the task like this: 

1. Set up a handler to handle the user's click ow the "Add Song" button. 

Z. Write the handler to get the song name the user typed iw, awd then... 

3. Create a hew dement to hold the hew semg, and... 

4. Add the element to the page's POM. 

If these steps aren’t clear to you, don’t worry, we’ll explain it as we go... for now, 
just get a feel for the steps and follow along as we get that handler written. Go 
ahead an open up a new file, playlist. j s for all your JavaScript code. 


fretting access to the "Add Sowg" buttow 


To ask the button to let us know when a click event occurs, we first need to get 
access to the button. Luckily we created the button using HTML markup and 
that means...you guessed it, it is represented in the DOM, and you already 
know how to get elements in the DOM. If you look back at the HTML you’ll 
see we gave the button an id of addButton. So, we’ll use getElementByld 
to get a reference to the button: 

var button = document.getElementByld("addButton"); 

Now we just need to give the button some code to call when a click occurs. 

To do that we’re going to create a function, named handleButtonClick, 
that will handle the event. We’ll get into functions in a bit; for now, here’s the 
function: 


TiiC is 




function handleButtonClick() { 

alert("Button was clicked !”）； 
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1. Set up a handler to handle the user's click 
1. Write the handler to get the so^ig name 

living the button a click handler 3. Create a new element to hold the new song 

4. Add the element to the page's POM 

Okay, we’ve got a button and we’ve got a function that will act as a handler, 
handleButtonClick, so let’s put them together. To do that we’re going to use a 
property of the button, one lick. We set the one lick property like this: 


var button = document.getElementByld("addButton"); 
button.onclick = handleButtonClick 


A 

l/Vith a butbm m a-Ptcv- dall'mj 你⑶ tByld, v/e set 七 he 。灼 didk 

pvopc\rty -to ihc y/c dal led wh ⑶ a didk ewt odduv-s. 


You might remember that we did something similar when we used the 
window. onload property to call a function after the window was loaded. In this 
case though, we’ll call the function when the button is clicked. Now let’s put all of 
this together: 

Jus-t like v/c did m 七 he las-t thap-tev, y/cVc 

产 _ us'mj *mi*t "that be called 

window.onload = init; t 一 ⑽七 “ 七 ^ p，is Ally loaded- 

function init() { 

var button = document.getElementByld("addButton"); 
button.onclick = handleButtonClick; 


function handleButtonClick() { 

alert("Button was clicked!") 


fay lodds we’ll 

— ^\rab bu*t*to^ a^d set uf 

•rts o^dlidk ha^dlcv-. 

ht\A the did< hdhd!e\r will display dh oilev-t 

wc dick Oh -the button. 


Putting it to a test... 


Go ahead and type in the code above (in your playlist. j s file), 
load the page, click on that button as much as you want and you’ll 
see an alert each time. 


After you’re finished testing your new button 
click handler, sit back and study the code and 
think through how all this works. 

When you think you’ve got it in your head, 
turn the page and we’ll step through the 
details to make sure it really sticks. 
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how add song works 


A closer look at what just happened... 

We just introduced a lot of new ideas over the last few pages, let’s step through 
the code again and make sure we’ve got it clear in our heads. Here we go: 



The first thing you did was throw a button in your HTML form. 
And with that in place, you needed a way to capture a users click 
on that button so that you could have some code executed. To do 
that we created a handler and assigned it to the onclick property 
of our button. 



function init() { 

var button = document.getElementByld("addButton") 
button.onclick = handleButtonClick; 


The bu-t-fcoh obje 匕七 
has drt ondidk 
p\ropc\rty 七 hat 
v/c set "to 七 he 

h 扣 dleButto 灼 Clide 



Wc sti up i\\t butbm 
c\\ck cvc»r»*b Ka^dlcv m 
■bKc *mi*b -fuhttioh ( 七 ha 七 
is, a-f-tev- i\\t pay has 
-fmisled lo3di^)- 


Add Song 



W\\tY\ the usev dli^ks OY\ *thc button ， 
•the ewt is -tvijjcvcd) a^d *tiic 

ha^dlcBu*t*to^Cli^k -Pui^dtio^ is 匕 ailed. 


function handleButtonClick() { 

alert("Button was clicked!") 




You also wrote a simple handler that just alerts the user that the 
button was clicked. Well be writing the real code for the handler 
in a sec, but this one works well for testing. 


Ff 








The ha^dlev- 
with youv CoAt 
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events and handlers 



With the code written, the page is loaded 
and displayed by the browser, the handler 
is installed...it's all up to the user now... 



Finally, the user clicks on your button, the 
button springs into action, notices it has a 
handler, and calls it... 



Time to 
wake up, there's 
a click from the user. 






I see I have a 
handler for this, 
better let him know. 


O 


o 





Add Song 




Yes! Somone clicked on the 
button. I get to run the 
handleButtonClick function. 


O 

0 


function handleButtonClick() { 

alert("Button was clicked !”）； 

} 


I was asked 
to alert you that the 
button was clicked... I 
know, for an alert dialog 
thafs a little underwhelming, 
but anyway, just doing my 
job. 




o 



http://localhost 


;i, /A 

Button was clicked! 







(OK ) 
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getting the song from the dom 


fretting the song name 


1. Set up a handler to handle the user's click 
Z. Write the handler to get the song name 

3. Create a new element to hold the new song 

4. Add the dement to the page's POM 


We’re ready to move on to the second step of our task: getting the song name that 
the user has typed in. Once we have that, we can think about how we’re going to 
display the playlist in the browser. 


But how are we going to get the song name? That’s something the user has typed 
in, right? Ah, but anything that happens in the web page gets reflected in the 
DOM, so the text the user typed must be there too. 


To get the text from a form text input element, you first have to get the input 
element from the DOM, and you know how to do that: getElementByld. And, 
once you’ve done that you can use the value property of the text input element to 
access the text the user types into the form field, here’s how: 


Here S body part 

o*f POM- 

is the WC body \ 

waht "to get -Pv-orw -the 

D 0 A 1 . I/Vcll use its id, - [ 

-to f_ 

—it. 



Wsih 9 ^ gctElc^chtByld method, wc 
“h a handle bo the sohgTcxtlhful 
input element ih the -PoV-rw. 


^ TV^cn wc ^ use value frofc\rty ut 

乂^ d ⑽ A 匕3冼如佚鈇如“狀 typed 
i\\t -field- 


ul id= 〃 play"st 〃 


Sharpen your pencil 

Rework i 


Rework the handleButtonClick function below to obtain the name of 


the song the user has typed into the form input element. Check your 
answer with the solution on page 96. 


function handleButtonClick() { 

var textlnput = document.getElementByld( n 

var songName = .. value; 

alert("Adding n + ); 
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events and handlers 


%|harpen your pencil 

( What if vou 



What if you wanted to test to make sure the user actually entered some 
text before clicking the button? How might you do that? (Again, find the 
solution on page 96.) 


there j are no ^ 

Dumb Questions 


What is the value of the value property of the text 
input if the user didn’t type anything? Is the value null? 

Or does the “Add Song” button not invoke the handler if 
the user hasn’t entered anything? 

The “Add Song” button isn’t that smart. If you want to 
determine if the user typed something, that’s up to your code. 
And, to know if the text input is empty (that is, the user didn’t 
type anything), you can check to see if its value is equal to a 
string with nothing in it, otherwise known as the empty string, 
which is written as “”， or two double quotes with nothing in 
between. We see why you’d think it might be null, because we 
said that is the value of a variable that has no value, but from 
the text input field’s perspective, it isn’t holding nothing, it’s 
holding on to a string with nothing in it yet. Go figure.;-) 

I thought that the text input “value” was an attribute. 
You’re calling it a property, why? 

You’re right, value is an attribute of the HTML text input 
element. You can initialize the value of a text input element 
using the value attribute. But in JavaScript, to access the 
value that a user has typed in, you need to use the value 
property of the input element we get from the DOM. 


What other kinds of events can I handle in 
JavaScript other than button clicks? 

There are a whole slew of other mouse events you 
can handle. For instance, you can detect and handle a key 
press, a mouse moving over or out of an element, the mouse 
dragging, even a mouse press and hold (different from a 
mouse click). And then there are many other types of events 
we’ve mentioned in passing, like events when new data is 
available, timer events, events related to the browser window, 
and so on. You’ll see quite a few other kinds of event handling 
in the rest of the book; once you know how to do one, you can 
pretty much do them all! 

What is JavaScript doing while it’s waiting for 
events? 

Unless you’ve programmed your JavaScript to do 
something, it sits idle until something happens (the user 
interacts with the interface, data comes in from the Web, a 
timer goes off, and so on). This is a good thing; it means the 
processing power of your computer is going to other things, 
like making your browser responsive. Later in the book, you’ll 
learn how to create tasks that run in the background so your 
browser can run the task code and respond to events at the 
same time. 
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exercise solutions 


%iharpen your pencil 

Solution 


0 


http://localhost 

Adding Blue Suede Strings，by Elvis Pagely 


OK 


Rework the handleButtonClick function below to obtain the name 
of the song the user has typed into the form input element. Here’s 
our solution: 


Fivs*t v/c v\ttd bo a >rt^tYtr\U *to 
•mfu 七 m i\\t *fovm. Wc vc i\\\s 

id o( ^ ^ ^ usc 

栎 a 七 v /办 -to yi a 


function handleButtonClick() { 

var textlnput = document.getElementByld("songTextInput"); 

var songName = textlnput.value; 

alert ("Adding " + songName) ; The value p\ropcv-ty o-P -the text 

ihput dcrwCht holds wh3*tcvcv 
,s typed ih-to the text ihfut, 
whidh is just a st\r*mg. WtYt wcVc 

lets \us*t Pop uP 3r\ alcv-*t, v/hidh should assig^mg that text "to the 

^ amC variable sohgKamc- 


^r\a r\ov/ lets just, yoy up dY\ di 

display ^Add\Y\^ by\A the 



What if you wanted to test to make sure the user actually entered some text 
before clicking the button? How might you do that? Here’s our solution: 


function handleButtonClick() { 

var textlnput = document.getElementByld( n songTextInput"); 


var songName = textlnput.value; 
if (songName == nn ) { 

alert("Please enter a song") 
} else { 

alert("Adding M + songName); 


We Uy\ use av\ \( siaitMY\i av\d domfavc 
七 he so^Nai^c S*tv'm 5 *to cw'fty s{x'\^ 
•bo make suve i\\t usev -typed sowjciKmj. 
|-f 七 ky did〆 七 *tyfc ar^iVnr^ “II alcv-t 
i\\t^ av\A ask i\\t^ -to tv\itr a so%. 
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How do we add a song to the page? 

We’ve already got a lot working! You can type a song name into a 
form, click the Add Song button and get the text you typed into the 
form, all within your code. Now we’re going to display the playlist on 
the page itself. Here’s what it’s going to look like: 


1. Set up a handler to handle the user's click 
t. Write the handler to get the sowg mm 

3. Create a new element to hold the new sowg 

4. Add the element to the page's POM 



Webville Tunes 




0 http://local host/ 〜 Beth/Head-First-HTT 

C Google 

) 





[Song narr 

16 

Add Song 



Blue Suede Strings, by Elvis Pagely 



you dl'idk w Add 
youv* JavaSdv*ip*t will add 
iiiC soy>g bo a o( soy^s 
or> fay. 



Here’s what we need to do: 

① You might have noticed that we already 
put an empty list in the HTML markup 
(an empty <ul> element to be exact) back 
when we first typed it in. Given that, 
here's what the DOM looks like right now. 

② Every time we enter a new song, we want 
to add a new item to the unordered list. 

To do that, we 11 create a new <li> element 
that will hold the song name. Then we 11 
take the new <li> element and add it to 
the <ul> in the DOM. Once we do that, the 
browser will do its thing and you’ll see the 
page update, just like the <li> was there 
all along. And of course, well do all this in 
code. Check out the DOM one more time 
and make sure you understand what we 、 
need to do. 
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creating new elements 



For the playlist shown here, draw the DOM as it looks 
after you’ve added all these songs. Notice the order in 
which the songs are added to the page, and make sure 
the elements are in the right places in the DOM too. 
We’ve gone ahead and done one for you. Check the 
solution at the end of the chapter before you go on. 


㊃ o d 


_Webville Tunes 


Song name 


Blue Suede Strin 


C j (CV Coogle 

Add Song 


9s, by Elvis Pagely 


Great Objects on Fire, by Jerry JSON Lewis 
I Code the Line, by Johnny JavaScript 

That, be the Data, by Buddy Bitly and the Var^ 

Y ° Ur Random Heart - ^ Hank ” Math” Williams 





Blue Suede Strings, 
by Elvis Pagely 


Did you have to make any assumptions about the order in which the 
<li> elements are added to the parent? 


the ^resi o-P the DOM 
士饮 the playlist above. 
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events and handlers 


How to create a new element 


You’ve already seen how to get access to existing elements through the 
DOM. But you can also use the DOM to create new elements (and then 
as a second step, add them to the DOM, which we’ll get to in a sec). 

Let’s say we want to create a <li> element. Here’s how we do that: 

Use *to d\rca*tc new elements. A 

*to y\c^i elemerrt is \rc*tuv 灼 ed. 


var li = document.createElement( n li n ); 



ttc\rc v/cVc dssi^'m^ 

•the Y\t^i *to 

variable li- 




Pass k*md o( element 
you v/ar>*t *to dvca*tc 办 a 

*fco 



」 We better get 

to work building these 
elements, Betty. They re 
updating the DOM again. 


^V"ca"tcElcrwcr>*t tv-ca*tcs d b\rdr)d r>cw elerwerrt. hloie 
七 hat i 七 \SY\i mse^rted \v\{p ihc VOM jusi yet 
Righi now rt is jus-t a -P\rcc—Ploatmg ele 你⑶七 m 
i\ttd o-P a plate m 七 he VOM- 


So now we have a new <li> element with nothing in it. You 
already know one way to get text into an element: 


li.innerHTML = songName; 

T \ 7 

(W li vanable. jK.s seis o( 

-the <l*i> *to *tV>c sohj title- 




Blue Suede Strings, 
by Elvis Pagely 


Hive’s ouv Y\t^ li element 


object v-cady b> 5 °- 

•rts 灼。七 

VOM yci! 


.Bu 七 
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adding new elements 


Adding an element to the POM 

To add a new element to the DOM you have to know where you 
want to put it. Well, we do know where to put it: we’re going to 
put the <li> element in the <ul> element. But how do we do 
that? Let’s take another look at the DOM. Remember how we 
said it was like a tree? Think family tree.. 


1. Set up a handler to handle the user's click 
Z. Write the handler to get the song name 
$. Create a new element to hold the new so^ig 
4. Add the element to the page's POM 


is like 

ma*tv-*iav-dV> o-f -family, a*t 如 
七 he *bof brtt- 




f! 

I 




tv>c 0 I 7 t^\d ^ 

ii 七 ml has *t>wo th*ildv-cir>, 

i head 3iy\A body, body’s 
pav-cir>*t is hWl. 




ul id= 〃 playlist’ 





So, to add our <li> element, we need to make it a child of the 
<ul> element. To do that, we first need to find the <ul> element 
in the tree (we gave it an id of “playlist” to make that easy) and 
then to add the <li>, we tell the <ul> element to add a new 
child to itself. Here’s how we do that: 

Use 5 c*t£lcmcy>*tByld bo a b> 

<ul> clcmcr>*t wi-tK id 二 laylisV' ? 

var ul = document.getElementById("playlist ”） 
ul.appendChild(li); 



ouv ul. 

ul ' s pavcht is body, 
3hd ul doesh^t have 
乙 hildireh, yei... 


...y/C y/ar\*b bo w^akc 

OUV" Tit'll 

七 he ^ild <ul>. 


Blue Suede Strings, 
by Elvis Pagely 




/\sk *tKc <ul> clcw\cr\*t *to ddd *tKc <li> dcmcr>*t 3s B diVild. Ot\tt 
七 his domplcics, i\\t VOM will have <I.I> as a cM\\A <ul> a^d 

the b\rov/ser v/ill update the display bo *tV>c ^ <!••>• 


*time you dal I 
appc^dChildl ； *thc r^cv/ 
<li> is added 

b> 七 he <ul> clcrr»c^*t 
a£tc)r any o-thev <li> 
dcrrvCl^'ts "that av-c 
already 七 heve. 
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events and handlers 


Put it all together... 

Let’s put all that code together and add it to the handleButtonClick 
function. Go ahead and type it in if you haven’t already so you can test it. 


function handleButtonClick() { 


var textlnput = document.getElementByld( n songTextlnput"); 


var songName = textlnput.value; 
var li = document.createElement("li"); 
li.innerHTML = songName; 
var ul = document.getElementByld("playlist"); 
ul.appendChild(li); 〜 


ihal wc ask -the pavwt ul, 

"to ddd li 3s d r\CY/ dhild. 


Pivs 七 , tvca*tc Y\tvi <ll> element >wV>CV-C 

七 k is *to 50. 

set the doir\*tc^*b that element *to 

Tiic <ul> with the id w playlist w is -the 
pav-c^*t element -fov ouv y\t^i <li>. So y/c 

gc*t that Y\c^b 

Tkh we add the li object -to the 
ul us'mj appehdCWd. 


... and take it for a test drive 

Put Webville Tunes through its paces, add a few songs. 
Here are our results. 



Webville Tunes 



N + 

0 http://localhost/-Beth/Head-First-HTML5y C (Oj Google 



Song name (Add Song) 



hev-e’s hov/ 七 he J)0M looks t\oyN 七 hat 

>/c ; vc added all those ^cv/ <li> clcmc^-ts. 


Blue Suede Strings, by Elvis Pagely 

Great Objects on Fire, by Jerry JSON Lewis 

I Code the Line, by Johnny JavaScript 

That’ll be the Data, by Buddy Bitly and the Variables 

Your Random Heart, by Hank ” Math" Williams 




Now v/c type m a a^d 

didk add, the is added "to -the 

VOM, so v/c sec the pajc a^d 

"the hcv/ \ y \ *thc list 
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review of the playlist app 


Review — what we just did 


You did a lot in this chapter (and in a short amount of time!). You built 
a playlist app that you can use to enter a song, click a button and add 
that song to a list on the page, all using JavaScript code. 



The first thing you did was set up an event handler 
to handle the users click on the ''Add Song" button. 
You created a function, handleButtonClick, and set 
the onclick property of the ''Add Song" button to 
this function. 


'Add Song ； 


7 


user dlidks S。％” button, 

youv ha^dlcBu*t*to^Cli^k ha^dlcv" will be called- 



Next, you wrote code for the button click handler 
to get the song name from the input text field. You 
used the input.value property to get the text, and 
you even added a check to make sure the user had 
typed in a song. If they didn’t, you alerted them. 

n 

form 




body 




In hahdlcBut-tohCli^ youVc 
the sohg hamc the usc\r typed \y\, by 
usm 9 "the mputvoiluc f\ropcv-ty -to get 
"the text -Pv-orw -the DOM. 、 


input id=”songTextInput" 
value="Blue Suede Strings by Elvis Pagely" 




ul id="playlist” 


input id="addButton” 




To add the song to the playlist, you then created li 

a <li> element using document.createElement, and ~~t~~ 

set the content of the element to the song name 

using innerHTML. ^* ue ^uede Strings, 

You ercaic a <!*,> A byE，V，S Pa9e，y 

a 灼 d se 七 *tV>c dov>*tc^*t o( *thc <li> 


Finally, you added the new <li> element to the DOM 
by adding it as a child of the parent <ul> element. 
You did this using appendChild, telling the <ul> 
element to ''append the <li> element as a child", 
which added it to the DOM. When the element is 
added to the DOM, the browser updates the page 
the user sees, and the playlist contains the song. 


3 ir>c>w 

diVild *to 七 he VOM 
updates *tV>c pay- 


I 

I 
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events and handlers 


Wait a sec, I get were interacting with the 
DOM and all, but how is this a real web App? If I close 
my browser, all my songs are gone. ShouldiVt my playlist 
items stick around if this is really an application? 


We agree, the playlist should be persistent; 

after all, what’s the point of entering all those songs if they 
don’t stick around? And there’s a lot of other functionality 
you might want to add as well. You might, for instance, want 
to add an audio interface using the audio/video API so you 
can actually listen to the songs, share songs out to friends 
using a web service (like Facebook and Twitter), find other 
people in the local area that like the same artists (using the 
geolocation APIs), and we’re sure you can come up with more. 

But back to the playlist...we wanted to get you up and running 
by building a small interactive app, and the playlist does a 
good job of that. Plus, storing the songs requires the HTML5 
Web Storage API, which is a few chapters away. 

Hmm, on the other hand we really don’t want to 
under-deliver here... 




you are here ► 


103 





We’ve gone ahead and baked a little code for 
you to save your playlists. For now you just 
need to type it in and make two tiny changes 
to your existing code and you’ll have an 
HTML5-stored playlist. 


We’ll be covering all the specifics of storing 
things locally in your browser in the Web 
Storage chapter, but for now you can get 
your playlist up and running. 


Of course, it never hurts to look over the 
Ready Bake code. You might be surprised 
how much you already know, not to mention 
how much of it you can figure out if you 
don’t know it. 



The Ready Bake Code_ 
won，t work in IE 6 or " 


IE versions 6 and 7 don’t 
support localStorage. So if 
you're using IE, make sure 
you're using version 8 or above. 


WatcK it! 



Watch it! 


The Ready Bake Code 
won’t work in some 
browsers if you，re 
serving your pages 
from file:// instead of 
a server like localhost:// or an 
online hosted server. 

We，11 deal with this situation more in 
future chapters (it pops up fairly often 
with new HTML5 features). For now, if 
y° u don’t want to run a server or copy 
the files to a hosted server online, try 
using Safari or Chrome. ’ 
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events and handlers 


How to add the Ready Pake Code... 

Here’s the Ready Bake code for you to add to your Webville Tunes app 
so you can save that fabulous playlist you’ve created. All you have to do is 
make a new file, playlist—store . j s, type in the code below, and then 
make a couple of changes to your existing code (on the next page). 




function save(item) { 

var playlistArray = getStoreArray("playlist"); 
playlistArray.push(item); 

localStorage.setltem("playlist ”， JSON•stringify(playUstArray)); 

} 

function loadPlaylist() { 

var playlistArray = getSavedSongs(); 

var ul = document.getElementByld("playlist"); 

if (playlistArray != null) { 

for (var i = 0; i < playlistArray.length; i++) { 

var li = document.createElement( M li ")； 
li.innerHTML = playlistArray[i ]； 

ul. appendChild (li) ; Type *m*to “playlis*t—S"to\rc js”. 

, 1 


function getSavedSongs() { 

return getStoreArxay (’ ’playlist ) 


function getStoreArray(key) { 

var playlistArray = localStorage.getltem(key); 

=null II playlistArray == 
new Array(); 


if (playlistArray 
playlistArray 

} 

else { 

playlistArray 


JSON.parse(playlistArray); 


return playlistArray; 
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storing the playlist 


Integrating your Ready Pake Code 


We need to make a few little tweaks to integrate the storage code. First, 
add a reference to playlist_store . j s in your <head> element in 
playlist.html: 


<script src= "playlist 一 store • js"X/script> 
<script src="playlist.js M X/script> 



冒_ 


Add this jus-t above youir 
I'mk -to playlist js. li loads 

the Ready Bake Code- 


Now you just need to add two lines to your code, in playlist. j s, 
that will load and save the playlist: 


function init() { 

var button = document.getElementByld("addButton"); 
button.onclick = handleButtonClick; 

loadPlaylist () ; 〈 _ _ This lodds saved soi^js v/he 灼 

} you load you\r so you sec youv- saved so 呼 . 


function handleButtonClick() { 

var textlnput = document.getElementByld( n songTextlnput M ); 
var songName = textlnput.value; 
var li = document. createElement (’ ▼ li ’▼); 
li.innerHTML = songName; 

var ul = document.getElementByld("list"); 

ul.appendChild(li) ; ^y\A 七 iVis saves youv so% t^cM 

save (songName) ; \ you 3dd oy>c *to playlist 


Test drive the saved songs 

Okay, reload the page and type in some songs. 
Quit the browser. Open the browser and load 
the page again. You should see all the songs 
stored safely in your playlist. 

Okav, you M W 1 — 七 

c\\tcV out 1 A/c1d S-to^ra^c cMayicr. 


n O 


Webvill© Tunes 


j - 4 I 1 IjLI 1 ^^np^/tocalhottZ-Bcth/Ncad-First-HTMi T 


>ong 


Coogle 


Add Song 


Blue Suede Strings, by Elvis Pagely 

Great Objects on Fire, by Jerry JSON Lewis 

I Code the Line, by Johnny JavaScript 

Thafll be the Data, by Buddy Bitly and the Variables | 

Your Random Heart, by Hank ” Math” Williams 

/A 


l/Vc added all -these 
soy\^s, closed -the 
bvoy/scir, vcopc^cd 
七 he bv-oy/sev, loaded 
the pay, a^d -theve 
they wcv-c. 
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events and handlers 


This is cool, were really starting to 
make the code and the page interact 
with each other. I'm curious though 
about functions, objects, and things like 
element.appendChild(). Do I need to learn 
more about those things? 



Perfect timing. 

We really wanted to take you through a complete 
interactive example of HTML markup and 
JavaScript working together to build the first part 
of a web applications. If you think about it, you’ve 
already done a lot: 

1) Inserted code into your page. 

2) Set up a button click event and written the code 
to capture and handle the button click. 

3) Asked the DOM for information. 

4) Created and added new elements to the DOM. 

Not bad! And now that you have a bit of an 
intuitive sense of how this all works together, let’s 
take a little detour down JavaScript Avenue to see 
how things like functions and objects really work. 

This isn’t going to be the regular tour, oh no, we’re 
going to pull up the manhole covers and get a rare 
look at how Webville functions. 


Interested? Gome on, join us in Chapter 4... 
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review of event handlers and the dom 


^^BUILET POINTS - 

■ There are lots of events happening in your 
browser all the time. If you want to respond to 
these events, you need to handle the events 
with event handlers. 

■ A button click event is triggered when you click 
on a button in a web page. 

■ You handle a button click event by registering 
a function to handle the event. You do this 
by writing a function, and setting the button’s 
onclick property to the function name. 

■ If a button click event handler is registered, 
that function will be called when you click on 
the button. 

■ You write code in the handler function to 
respond to the button click event. You can alert 
the user or update the page or something else. 

■ To get the text a user has typed into a form 
input text field, you use the input’s value 
property. 

■ If a user has not entered anything into a form 
input text field, the value of the field will be the 
empty string (“”)■ 

■ You can compare a variable to the empty string 
using an if test and ==. 


■ To add a new element to the DOM, you first 
need to create the element and then add it as 
a child of an element. 

■ Use document.createElement to create a new 
element. Pass the tag name (e.g., “li”）into the 
function call to indicate what element to create. 

■ To add an element as a child of a parent 
element in the DOM, get a reference to the 
parent, and call appendChild on the parent, 
passing in the child element you’re adding. 

■ If you add multiple children to a parent 
by using appendChild, each new child is 
appended after the other children, so they 
appear after or below the other children in the 
page (assuming you’re not changing the layout 
with CSS). 

■ You can use the Web Storage API 
(localStorage) to store data in a user’s 
browser. 

■ We used localStorage to save playlist songs, 
using Ready Bake Code. You'll learn more 
about localStorage in Chapter 9. 

■ You'll learn more about the DOM and 
JavaScript features like functions and objects 
in the next chapter. 
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events and handlers 



HTML5CP0SS 

Give yourself some time to understand the 
interactions between HTML and JavaScript. Think 
through how it all works together. While you’re 
doing that mix it up a little by doing this crossword. 
All the words are from this chapter. 



Across 

2. DOM’s method for creating new elements. 

3. DOM’s method for adding new elements. 

5. Happens when the user clicks on a button. 

6. The DOM is like a family_. 

7. The grand matriarch of the DOM tree. 

9. The default value of a form input element if the user 

doesn’t type anything is the_string. 

10. Used in Ready Bake to enable storage. 


Down 

1. Code that takes care of events. 

2. Insert new elements as a_ 

4. Artist used in our example song. 

8. What’s ahead? Functions and — 

9. A button click is an 
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exercise solutions 



For the playlist shown here, draw the DOM as it 
looks after you’ve added all these songs. Notice the 
order in which the songs are added to the page, and 
make sure the elements are in the right places in the 
DOM too. Here’s our solution. 


document 




i~t — j r — p— ___ Webville Tunes 


I Song name 


Add Song 


Blue Suede Strings, by Elvis Pagely 
Great Objects on Fire, by Jer^ JSON Lewis 
I Code the Line，by Johnny JavaScript 

Tharil be the Data, by Buddy Bitly and the Variables 

Y ° Ur Ran dom Heart, by Hank，， Math " Williams 







the ircst o( the 




Blue Suede Strings, 
by Elvis Pagely 






Your Random Heart, by 
Hank ''Math" Williams 


Great Objects 
on Fire, by Jerry 
JSON Lewis 


Thafll be the Data, by 
Buddy Bitly and the 
Variables 


I Code the Line, by 
Johnny JavaScript 


Did you have to make any assumptions about the order in 
which the <li> elements are added to the parent? 


Yes, because i*t a-f-fedts -the display order -the 
soh^s oy\ the page. appchdChild always appends the 
elemerrt -the oOstmg dhildvch. 
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events and handlers 



HTML5cross Solution 
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Can you call yourself a scripter yet? Probably—you already 

know your way around a lot of JavaScript. But who wants to be a scripter 
when you can be a programmer? It’s time to get serious and take it up a 
notch — it’s time you learn about functions and objects. They’re the key to 
writing code that is more powerful, better organized and more maintainable. 
They’re also heavily used across HTML5 JavaScript APIs, so the better you 
understand them the faster you can jump into a new API and start ruling with it. 
Strap in, this chapter is going to require your undivided attention... 


this is a new chapter 
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defining your own functions 


Expanding your vocabulary 

You can already do a lot with JavaScript, let’s take a look at some 
of the things you know how to do: 

〜ab a 的 element -fv-om 七 

do^um ⑼七 objcd.*t model. 

<script> 

var guessInput = document.getElementByld("guess"); 
var guess = guessInput.value; 
var answer = null; 




今 e 七 the value o( a -Pom 
•mpu 七七 ex • 七 -f ield- 


9^ 


f 


var answers 


’red n , 
'green", 
'blue"]; 


Cvea 七 e a av-v-ay 

-filled WrBi s*bri 呼 . 


Use libvav-ics o( 

-Pur>d*tio^s. a 

^ away, l'»kc ㈣ 七 Vv 


var index = Math.floor(Math.random() * answers.length) 

^ ~^ Make dedisiems based 

if (guess == answers [index]) { oh dohditio^als. 

answer = "You're right! I was thinking of " + answers[index]; 

} else { 气 


answer = '▼ Sorry, I was thinking of '▼ + answers [index]; 


alert(answer); 
</script> . 


Use "the derwe^-b 


o( 




array- 


Use bv-ov/sev- 

like alc\rt- 


So far, though, a lot of your knowledge is informal — sure, you can get an 
element out of the DOM and assign some new HTML to it, but if we asked 
you to explain exactly what document. getElementByld is technically, 
well, that might be a little more challenging. No worries; by the time you 
leave this chapter you’re going to have it down. 

Now to get you there, we’re not going to start with a deep, technical analysis 
of getElementByld ， no no, we’re going to do something a little more 
interesting: We’re going to extend JavaScript’s vocabulary and make it do 
some new things. 
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javascript functions and objects 


How to add your oww fuwctiows 

You’ve been using built-in functions, like alert, or even Math. random, but what if 
you wanted to add your own? Let’s say we wanted to write some code like this: 


var guessInput = document•getElementByld( n guess n ); 
var guess = guessInput.value; 


var answer = checkGuess(guess); 
alert(answer); 


WcVc ^vabb'm^ 七 uscv-^s 
^uess jus 七 like v/c v/cv-c ov\ 
pvcvious fay … 






Create a checkGuess function 

❶ To create a function, use the function keyword and 
then follow it with a name, like ''checkGuess''. 


function checkGuess(guess) { 


var answers 


'red", 
’green", 
'blue"]; 


❷ Give your function zero or more 
parameters. Use parameters to 
pass values to your function. We 
need just one parameter here ： 
the users guess. 


var index = Math.floor(Math.random() * answers.length); 

if (guess == answers[index]) { 

answer = "You' re right! I was thinking of '▼ + answers [index] 
} else { 

answer = ’’Sorry, I was thinking of " + answers [index]; 


return answer 


— ^ 
o Optionally, return a value 

as the result of calling the 
function. Here were returning 
a string with a message. 


❺ Write a body for your function, which 
goes between the curly braces. The body 
contains all the code that does the work of 
the function. For the body here, we 11 reuse 
our code from the previous page. 
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how functions work 


How a fuwctiow works 

So how does this all work? What happens when we actually invoke a 
function? Here’s the 10,000-foot view: 


Okay，first we need a function. 

Let’s say you’ve just written your new bark 
function, which has two parameters, dogName 
and dogWeight, and also a very impressive bit 
of code that returns a dog’s bark, depending 
on its weight of course. 一 

, / 

s ou\r \\BY\dy 

ba\rk 灼匕七 10 灼 . 


function bark(dogName, dogWeight) { 
if (dogWeight <= 10) { 

return dogName + ’▼ says Yip"; 

} else { 

return dogName + ’▼ says Woof"; 


Now let’s invoke it! 


You know how to call a function already: just use 
its name and give it any arguments it needs. In 
this case we need two: a string with the dog’s 
name, and the dog’s weight, which is an integer. 

Let’s make that call and see how this works: 


Ouv* -Pu^d*tior> name. 


wcVc pass'mo 


bark( n Fido n , 50) 




W\\cv\ wc dal I bavk, -the 
av*e assigned bo "the 
'm the bav-k 


function bark (docrName r 


dogWeight) 


if (dogWeight <= 10) { 


{ 


return dogName + " says Yip"; 


} else { 

return dogName + '▼ says Woof"; 

pavamc-tcvs } 

values v/e passed m ave used. ^ 
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javascript functions and objects 


And, let the body of the 
function do its work. 


After we’ve assigned the value of each 
argument to its corresponding parameter in 
the function — like “Fido” to dogName and the 
integer 50 to dogWeight — then we’re ready 
to evaluate all the statements in the function 
body. 

Statements are evaluated from top to bottom, 
just like all the other code you’ve been writing. 
What’s different is that we’re doing it in an 
environment where the parameter names 
dogName and dogWeight are assigned to the 
arguments you passed into the function. 


function bark(dogName, dogWeight) { 
if (dogWeight <= 10) { 

return dogName + " says Yip"; 

} else { 

return dogName + " says Woof"; 

1 ' ( 

、 Hc\rc wc evaluate all -the todt -the body. 


^ — Rcmcmbcv-, \rc<\ui\rcd 

Optionally，we can have return ^ 代七认作 a value. But m 七 iVis ust, 

statements in the body... 七 bavk docs a value 

... and that’s where we return a value back to the 
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importance of functions and objects 



If we could have another moment to talk... 

We know, we know, by Chapter 4 you thought you’d be flying in an 
HTML5 jetpack by now, and we’ll get there. But before we do, you 
really need to understand the underpinnings of the HTML5 JavaScript 
APIs, and we’re going to do that in this chapter. 

So what are these underpinnings? Think of the HTML5 JavaScript 
APIs as made up of objects, methods (otherwise known as functions) 
and properties. And so to really get in and master these APIs, you 
need to understand those things pretty well. Sure, you could try to 
get by without knowing them, but you’ll always be guessing your 
way around the APIs while failing to use them fully (not to mention 
making lots of mistakes and writing buggy code). 

So we just wanted to drop you a note before you got too far into this 
chapter to tell you what we are up to. Here’s the great thing: by the 
end of this chapter you’re going to understand objects, functions, 
methods and a lot of other related things better than about 98% of 
JavaScript scripters out there. Seriously. 
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javascript functions and objects 



The FuiftcttoTi 

This week’s interview: a few 
things you didn’t know... 


Head First： Welcome Function! We’re looking 
forward to digging in and finding out what you’re 
all about. 

Function： Glad to be here. 

Head First： Now we’ve noticed many people 
who are new to JavaScript don’t tend to use you a 
lot. They just get in and write their code, line by 
line, top to bottom. Why should they take a look at 
you? 

Function： Yes, and that is unfortunate, because 
I’m powerful. Think about me like this: I give you 
a way to take code, write it once, and then reuse it 
over and over. 

Head First: Well, excuse me for saying this, but 
if you’re just giving them the ability to do the same 
thing, over and over".that’s a little boring isn’t it? 

Function： No no, functions are parameterized — 
in other words, each time you use the function, you 
pass it arguments so that you can get back results 
that vary, depending on what you pass in. 

Head First： Err, example? 

Function： Let’s say you need to tell your 
users how much the items in their shopping 
cart are going to cost, so you write a function 
computeShoppingCartTotal. Then you 
can pass that function different shopping carts 
belonging to different users and each time you get 
the appropriate cost of the shopping cart. 

...By the way, back to your comment about 
new coders not using functions; that’s simply 
not true, they use them all the time: alert, 
document.getElementByld, Math.random. 
They just aren’t defining their own functions. 


Head First： Well, right, alert, that makes sense, 
but the other two don’t look quite like functions. 

Function： Oh they’re functions, you see... hold on 
just a sec... 

...oh, I was just told the readers haven’t learned 
about those kinds of functions yet, but they’re 
getting there in a few pages. Anyway, functions are 
everywhere. 

Head First: So, one thing a function has to do is 
return a value, right? I mean, what if I don’t have 
a value I want to return? 

Function： Many functions return values, but a 
function doesn’t have to. Lots of functions just do 
something like update the DOM and then return 
without any value, and that’s just fine. 

Head First： So in those functions I just don’t 
have a return statement? 

Function： You got it. 

Head First： Well, what about naming your 
functions, I’ve heard you don’t have to do that 
either, if you don’t want to. 

Function： Okay, let’s not freak the audience out 
too much. How about we come back to that topic 
after they know a bit more about me? 

Head First： As long as you give me an exclusive? 

Function: We 11 talk... 
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parameters and arguments 


rm not sure I get the 
difference between a parameter 
and an argument—are they just two 
names for the same thing? 


No, they’re different. 

When you define a function you can define it with one or 
more parameters. 

ttcv-c wcVc thv-cc 

pav-amc*tcv-s ： dcyccs, r»odc 

a 灼 d duvatio^. 

J 4 / \ 

function cook(degrees, mode , duration) { 
// your code here 

} 

When you call a function, you call it with arguments'. 

cook(425.0, n bake n , 45); 



These av-c Thcvc av-c thv-cc 

⑼ *ts, a -Ploatm^ pom*t 灼 umbev，a 

J/ ^ 

cook(350.0, "broil", 10); 



So you’ll only define your parameters once, but you’ll probably call 
your functions with a lot of different arguments. 


You d be amazed how many people this 
^ y/v-o^0|—books yt i 七 so i-P you \read 

i*t diWcv-c^*tly cUcv/hcv-c, r\OYJ you know •… 


You cteline a {unction witk parameters, 
you call a lunction witli argumentSt 
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atiiy ci ^unctian 


Now that you know how to define and call a function, let’s make sure we’ve got 
the syntax down cold. Here are all the parts of a function’s anatomy: 


Follow kcV>wov-d y/i*bh 


/\lv/ays start 

keywovd 认仏灼匕七 10 灼 ’ . 



rollov/ the -ru^ctio^ Keyword v/rth 

of youv f[Y\d 灼 ZjCVO o\t move 

£.ommd sefavated pavame 七 ers 

bctv/c ⑼ fav-cr\*tiicscs. 


Evcr> i-f youir hds n 。 

pav-arwctcirs, you still need 

扣 opc^'mj dnd dosmg set of 

pav-c^s, like 0. 


addscore 


level 


score 




The body sits bctv/cc^ t>wo 
乙 uvly bvadcs dr>cl doirtdms d set 

o\ staicmc^ts (\usi like -the 
st3"tci^c^xs you vc used -to). 


Heme’s 七 he dos’mg 
bv-adc o( 七 he body. 


h -fu^dtio^ ddrt mdlude d 
s-tatcmc^i v/iih 七 he \rctuv-r> 
kcyy/oird, bui it does〆 七 have -fco. 


The v-c*tu\f^ s*ta*tcmc^*t mdludcs a 的 

C%fV"Cssio^ ; v/hidh is \rc*tuwd as a 

result ddllm^ the *Pimd*tio 灼 . 



Dumb Quest? 


9ns 


Why don’t the parameter names 
have var in front of them? A parameter is 
a new variable right? 


I’m passing a variable to my 
function—if I change the value of the 
corresponding parameter in my function 


A- 

r \* Efffectively yes. The function does all 
the work of instantiating the variable for you, 
so you don’t need to supply the var keyword 
in front of your parameter names. 


What are the rules for function 
names? 


A 


The rules for naming a function are the 
same as the rules for naming a variable. 


does it also change my original variable? 

No. When you pass a primitive value 
it is copied into the parameter. We call this 
“passing by value.” So if you change the 
value of the parameter in your function body 
it has no affect on our original argument’s 
value. The exception to this is passing an 
array or object, and we’ll get to that in a bit. 


So how can I change values in a 
function? 

You can only change the values of 
global variables (those defined outside of 
functions), or variables you’ve explictly 
defined in your function. We’re going to talk 
about that in a little more detail shortly. 


What does a function return if it 
doesn’t have a return statement? 


A- 

r \* A function without a return statement 
returns undefined. 
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exercise on parameters 


i^harpen your pencil 


Use your knowledge of functions and passing arguments to parameters 
to evaluate the code below. After you’ve traced through the code, write 
the value of each variable below. Check your answers with the solution 
at the end of the chapter before you go on. 


function dogsAge(age) { 
return age * 7; 


var myDogsAge = dogsAge(4); 


function rectangleArea(width, height) { 
var area = width * height; 
return area; 

} 

var rectArea = rectangleArea(3, 4); 

function addUp(numArray) { 
var total = 0; 

for (var i = 0; i < numArray.length; i++) { 
total += numArray[i]; 

} 

return total; 

} 

var theTotal = addUp([1, 5, 3, 9]); 

function getAvatar(points) { 
var avatar; 
if (points < 100) { 
avatar = "Mouse"; 

} else if (points > 100 && points < 1000) { 
avatar = "Cat"; 

} else { 

avatar = "Ape"; 

} 

return avatar; 

} 

var myAvatar = getAvatar(335); 



l/Vv-iic ihc 
value o( eddh 
vav-iablc hcv-c... 


myDogsAge = 


rectArea = 


theTotal = 


myAvatar = 


122 Chapter 4 










javascript functions and objects 


Local and Global Variables 

Know the difference or risk humiliation 

You already know that you can declare a variable by using 
the var keyword and a name anywhere in your script: 



var avatar; 

var levelThreshold = 1000; 

And you’ve seen that you can also declare 
variables inside a function: 


TVicsc av-c global variables ； 

•m youv- 乙 ode. 


function getScore (points) { Tlic pom-ts, sdovc i 

— variables avc all AtcWt 
wi 七 hm a -Puhdiioh. 


var score; 


for (var i = 0; 
//code here 


< levelThreshold; i++) 


return score; 



Wc ddll them loddl vaHdbles 
because -they av-c only 
khoym loddlly wrth’m 七 he 
-fur>dtior> itscl-f. 


i-p wc use IcvdThv-cshold mside 
the ii ； s global because its 

deda\red outside "the 

But what does it matter? Variables are variables, right? 
Well, where you declare your variables determines how 
visible they are to other part of your code, and, later, 
understanding how these two kinds of variables operate 
will help you write more maintainable code (not to 
mention, help you understand the code of others). 


II a variatle is 

declared outside 
a lunction ， it’s 

GLOBAL. H it’s 

declared inside a 

lunction ， it，s LOCAL* 
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local and global scope 


Knowing the scope of your local and global variables 


Where you define your variables determines their scope] that is, where they are defined and 
where they aren’t, where they’re visible to your code and where they aren’t. Let’s look at 
an example of both locally and globally scoped variables — remember, the variables you 
define outside a function are globally scoped, and the function variables are locally scoped: 


var avatar = "generic"; 
var skill = 1.0; 
var pointsPerLevel = 1000; 
var userPoints = 2008; 


function getAvatar(points) { 

var level = points / pointsPerLevel; 

if (level == 0) { 

return "Teddy bear"; 

} else if (level == 1) { 
return "Cat"; 

} else if (level >= 2) { 
return "Gorilla"; 



function updatePoints(bonus, newPoints) { 


for (var i = 0; i 

l < bonus; i++) { 

newPoints += 

1 

skill * bonus; 


i 

return newPoints 

+ userPoints; 


} 



userPoints = updatePoints(2, 100) 
avatar = getAvatar(2112); 



These -fouv vavidbles av-c 
globally sloped- That 
they avc dc-P'mcd and visible 
all -the Code belo>M. 

Ko*tc i-P you Imk -to 
additional sdvifb m youv- 
-they v/ill see -these 
lobal vaviablcs *too| 

The level vaviable hcv-c is 
lodal Br\d is visible or^ly 
*to todt 

ytA v a*tav* -Pu^dtio^. Tha 七 
or>ly -Pur>d*tio^ CBy\ 

addess 七 I 化 level vav-iablc- 

/Wd let's v\oi tVic 

pom*b pav-ametev-, ^i\\\cM 
also lids lo^al s^opc m 
ytAvaW 七 uw. 

No*tc makes 

use o( 七 he po'm*UPcv*Lcvcl 
global vaviablc -too. 

I 朽 ufda*tcPom*b wc have a lodal 
vaviable i i is visible *to all 
{}\t Code \y\ ufda 七 ePom*ts. 

\>oms d^d 灼 cv/Poiivts a\rc also 
\oca\ b> upda*tcPo*m*b, while 
usc\rPo*m*ts is global- 


\y\ ou\r dode we 

usc °^ly the global vaHables, 

we have ho aucss -to 
variables ihsidc the -Puh^tiohs 
beUuse thcyVc hot visible ih 
the global sdopc. 
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The short lives of variables 

When you’re a variable, you work hard and 
life can be short. That is, unless you’re a global 
variable, but even with globals, life has its limits. 
But what determines the life of a variable? Think 
about it like this: 

Globals live as long as the page. A global 
variable begins life when its JavaScript is loaded 
into the page. But, your global variable’s life ends 
when the page goes away. Even if you reload the 
same page, all your global variables are destroyed 
and then recreated in the newly loaded page. 

Local variables typically disappear 
when your function ends. Local variables 
are created when your function is first called and 
live until the function returns (with a value or 
not). That said, you can take the values of your 
local variables and return them from the function 
before the variables meet their digital maker. 



I could have sworn the 
variable was right behind me, 
but when I turned around he 
was just...gone... 


Wc say u typidally w because theve avc some 
advahded ways io ireta'm locals a little \o^r, 
but wc v\oi jo'mj -to y/o\r\ry aboui them hoy/. 


So, there really is NO escape from the page is 
there? If you’re a local variable, your life comes 
and goes quickly, and if you’re lucky enough to 
be a global, you’re good as long as that browser 
doesn’t reload the page. 


But there just has to be a way to escape the page! 
We can find a way! Can’t we? — 


Jom us m lAfek 

ouv data estate 

dbreaded 阿 
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shadowing variables 


What happens when I 
name a local variable the 
same thing as an existing 
global variable? 



You ‘‘shadow” your global. 

Here’s what that means: say you have a global variable 
beanCounter and you then declare a function, like this: 


var beanCounter = 10 




function getNumberOfltems(ordertype) 
var beanCounter = 0; 
if (ordertype == "order") { 

// do some stuff with beanCounter... 

} 

return beanCounter; 


Wc'vc go-t a global 
oihd d 





When you do this, any references to beanCounter within 
the function refer to the local variable and not the global. 
So we say the global variable is in the shadow of the local 
variable (in other words we can’t see it because the local 


version is m our wa^ 


X Hoic that lo^l ahd global 
variables Kav C ho oh 

Ot ^： you \i has 

ho wert oh -the o-thev-. They 
^ variables. 


126 Chapter 4 


javascript functions and objects 


theve-icire no ^ 

Dumb Questions 


广 

|-f 七 iVis y/cvc d 
book oy\ m— 

JavaSdvip*t 

y/cd take you 
-fuvtKcv- *m*to this 
•bofid, but 5*ivcr> 

七 ha 七 *tiVis is Head 
p,v-stttTML^ 

jus 七 surest you 
c%plov-c 七 iVis -bof'id 
-fuvtKcv- *to *ir«pv-ovc 
七 he quality o-f 
youv £.odc| 


Keeping track of the scope of all these 
locals and globals is confusing, so why not just 
stick to globals? That’s what I’ve always done. 


A 


If you’re writing code that is complex or that 
needs to be maintained over a long period of time, 
then you really have to watch how you manage your 
variables. When you’re overzealous in creating global 
variables, it becomes difficult to track where your 
variables are being used (and where you’re making 
changes to your variables’ values), and that can lead 
to buggy code. All this becomes even more important 
when you’re writing code with coworkers or you’re 
using third-party libraries (although if those libraries 
are written well, they should be structured to avoid 
these issues). 

So, use globals where it makes sense, but use them 
in moderation, and whenever possible, make your 
variables local. As you get more experience with 
JavaScript, you can investigate additional techniques 
to structure code so that it’s more maintainable. 

I have global variables in my page, but I’m 
loading in other JavaScript files as well. Do those 
files have separate sets of global variables? 


A 


There is only one global scope so every file 
you load sees the same set of variables (and creates 
globals in the same space). That’s why it is so 
important you be careful with your use of variables 
to avoid clashes (and reduce or eliminate global 
variables when you can). 

I’ve seen code where people don’t use the 
var keyword when assigning a value to a new 
variable name. How does that work? 


A 


Yes, that can be done; when you assign a 
value to a variable name that hasn’t been previously 
declared, it is treated as a new, global variable. 

So be careful, if you do this within a function you 
are creating a global variable. Note that we don’t 
recommend this coding practice; not only is it 
potentially confusing when reading code, some 


people think this behavior may change some day 
in the JavaScript implementations (which would 
probably break your code). 

Q/ Do I need to define a function before I use 
it, or can it appear anywhere in my script? 


A 


Function declarations can appear anywhere 
in your script. You can declare a function below 
where you use it if you want. This works because 
when you first load your page, the browser parses 
all the JavaScript in the page (or in the external 
file) and sees the function declaration before it 
starts executing the code. You can also put your 
global variable declarations anywhere in your script, 
although we recommend declaring all your global 
variables at the top of your files so they’re easy to 
locate. 

One thing to keep in mind when using more than 
one external JavaScript file is that if you have two 
functions in different files named the same thing, the 
function that the browser sees last will be the one 
that is used. 

Everyone seems to complain about the 
overuse of global variables in JavaScript. Why 
is this? Was the language badly designed or do 
people not know what they’re doing, or what? 
And what do we do about it? 


A 


Globals are often overused in JavaScript. 
Some of this is because the language makes it easy 
to just jump in and start coding—and that’s a good 
thing—because JavaScript doesn’t enforce a lot of 
structure or overhead on you. The downside is when 
people write serious code this way and it has to be 
changed and maintained over the long term (and 
that pretty much describes all web pages). All that 
said, JavaScript is a powerful langauge and includes 
features like objects that you can use to organize 
your code in a modular way. Many books have been 
written on that topic alone, and we’re going to give 
you just a taste of objects in the second half of this 
chapter (which is only a few pages away). 
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functions as values 


OK did we mention fuwctiows are also values? 

OK, you’ve used variables to store numbers, boolean values, strings, arrays, 
all kinds of things, but did we mention you can also assign a function to a 
variable? Check this out: 


function addOne(num) 
return num + 1; 


var plusOne = addOne; 




Let’s a simple 七 io 朽 七 ha 七 adds 

ov\t bo »*b 


|s/ov/ lets do lA/lc II 

o-f *tiic addOv\c ar\d assiy 

addOv^t bo a 咖 variable ； flus^e. 



Notidc v/cVc 朽 o*t -Pu^dtio^ v/i*th 

Sdd0r\c0, wcVc jus*t us'm^ *thc -Pu^d*tior> 


var 


result = plusOne(1); 



this ddll 

v-csul*t is c<\ual *to Z- 



plus^W is assigned io a kuho^, so wc 

匕 all rt wi-th ay\ ihtcgcir avgurwCht o( I. 


Well, not only did we fail to mention this little detail about functions before 
now, but we also weren’t totally honest when we told you about the anatomy 
of a function — as it turns out, you don’t even have to give your function a 
name. That’s right: your function can be anonymous. What the heck does that 
mean, and why would you want to do such a thing? First let’s see how you 
create a function without a name: 


function(num) { 
return num 


Hcv-c wcVc a -Pu^d-tio^ 的 。七 us'mj a 

- … bu*t how do wc do wi*th i*t? 

Let’s do i 七 dy m dirtd -this -time 
ass 咖 i 七 *fco a vairiable- 


var f = function(num) 
return num + : 


/ f[v\A 从⑼ y/e use 
^ 〜 variable bo ^all 


var result = f(1); 
alert(result); 


A-P*tcv- this dal I 

\rcsul*t is c«\ual *to Z. 
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Take a look at this code: what do you think is going on? 




var element = document.getElementByld("button"); 
element.onclick = function () { 


This should stav-*t bo 
look a little w>o\rC 
u^devs-ba^dable wi*th 
>wha*t v/c \us*t dovcv-cd-- 


alert("clicked! n ); 




Po^*t v/ov-v- 


DV-v-y i-p youVc still 灼 。七 

100% i*t, well thcv-c-.. 


What you caw do with functions as values? 

So what’s the big deal? Why is this useful? Well, the important thing isn’t so much that 
we can assign a function to a variable, that’s just our way of showing you that a function 
actually is a value. And you know you can store values in variables or arrays, you can pass 
them as arguments to functions, or as we’ll soon see, you can assign them to the properties 
of objects. But, rather than talking you through how anonymous functions are useful, let’s 
just look at one of the many ways using functions as values starts to get interesting: 


ttcv-C^s a simflc mi 七 

function init() { 

alert("you rule!") 

} 

window.onload = init; 



Or we could get even fancier: 


window.onload = function() { 

alert("you rule!"); 

} 


ttc 代叫 cVc ass+W^c 

deemed ^ onload “did 

ttcy look, wc wcv-c alv-cady us'm^ 

-Pu^dtio^s ds values! 

s 。 一 ‘ 代 ⑽ a 七叫 a Wfe 。 Y 巧士 

七咖 od 七 ^ ass-.^m 3 rts value to 
七 V^c Wmdov/ oy\load pvopcv 七 y d»v-c6 Y* 


Po^*t wovvy i-P y/mdow.o 灼 load 

is s*bill a little ur>dlcav-, wcVc 
\us*t abou*t *to dovcv- all that- 



Wow, is^*t that simplcv 
av\d r»ov-c v-cadablc? 


You might be starting to see that functions can do some useful things beyond just 
packaging up code for reuse; to give you a better idea of how to fully take advantage 
of functions, we’re going to take a look at objects and see how they fit into JavaScript, 
and then we’ll put it all together. 
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pep talk before introducing objects 


Authors? Hello? 

Hello? I'm the girl who bought 
the HTML5 book, remember me? 
What does all this have to do with 
HTML5??? 


Well we thought we’d covered that 
already... but if it looks like we’ve picked 
you up and have driven you halfway around 
the city with the meter running (when we could 
have driven you straight downtown), well, then 
remember we’re about to start diving into the 
APIs that work with HTML5 in the next chapter. 
And, doing that is going to require that you really 
understand functions, objects and a few other 
related topics. 

So hang in there — in fact you’re halfway there! 
And don’t forget, this is the chapter where you’re 
going from scripter to programmer, from an 
HTML/CSS jockey to someone who is capable 
of building real apps. 


L 


Did we alveady -tha-t is 

pvobably -to make you a lo 七 
rwovc rr\OY\ty *too? 
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With objects, the futures 
so bright we really DO 
have to wear shades... 


Pid someone say "Objects"?! 


Ah, our favorite topic! Objects are going to take your JavaScript programming 
skills to the next level — they’re the key to managing complex code, to 
understanding the DOM, to organizing your data, and they’re even the 
fundamental way HTML5 JavaScript APIs are packaged up (and that’s just 
our short list!). That said, objects are a difficult topic, right? Hah! We’re going 
to just jump in head first and you’ll be using them in no time. 

Here’s the secret to JavaScript objects: they’re just a collection of properties. Let’s 
take an example, say, a dog. A dog’s got properties: 


AH dojs have a lis*t o-P activities 
七 hey cryoy, like walk’mg ar\d 
balls. 



do(\s have hXi 


AH dojs have a weight 


3 bv-ccd- lv\ -this dase we’d 
dal I Pi do a mixed b\rccd- 


you are here ► 


131 



objects and properties 


Thinking about properties... 


Of course Fido would be the first to admit there’s a lot more to him than 
just a few properties, but for this example, those are going to be the ones we 
need to capture in software. Let’s think about those properties in terms of 
JavaScript data types: 


f\s you p\robably 
guessed ； wcVc 50 'm^ 
{jo iiavc By\ object 
a do 汐 



a sti pvofcvtics.. 



name ： u Fido' 


yrt some s*bri 呼 


d^d bveed- 


weight ： 40 <： 


breed ： ''Mixed 1 



^v\d v/c'vc ^oi av\ m 七 
-fov - 


loves ： [''walks”, ''fetching balls"] 

/W well co\\tc{, -the dojs^) 

w |ov/€s” m a 的 a\rv*ay o( s*tv"ihjs, 

ztYo ov- nr»o\rcj hcv-c v/c^vc jo-t 
Fido^s -two m*tcv-cs-ts- 


How to create aw object m JavaScript 

So we’ve got a object with some properties; how do we create this using 
JavaScript? Here’s how: 


1 /VcVc jo'm^ *to assign ouv- 
objett -to variable -fid 



var fido = { 



name: "Fido " r 
weight : 40, 
breed: "Mixed " f 
loves : ["walks " f 


Start a 於 ob\^t tV. c \th Uohu cadV. 

duv .| Y bvatc, all tV^c \s sedated by a tor,^ 

arc jomj 30 ms.de. ^ a 父 “ oU! 

TWis object V^as W frofcvtics, 

^ - - y/eijivt) bv-ccd a^d l° vcs * 

No 七 ide 七 ha 七 "Uie vdluc o-p y/ci^K^ 
is a humbcir, ^O, ahd the values 

"fetching balls"] kccd a " d ^ ^ 如乎 




A^d of douirsc wc have ah 
away "to hold the do^s loves. 
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Some things you can do with objects 


javascript functions and objects 


O Access object properties with 、、 dot 〃 notation ： 


if (fido.weight > 25) 
alert("WOOF"); 

} else { 

alert( n yip n ); 

} 


Use objedt aloh^ w'i*tK a 
ar\d a f\rofCV-ty Y\Brfst *to atUss 
■the value o( that fv-ofevty- 




« w 


Use a w 


fido.weight ^ 

, ，今 …仏⑶七 he 

rrcv-c s tlic object... pv-opevty 


❷ Access properties using a string with [] notation ： 


var breed = fido["breed"] 
if (breed == "mixed") { 

alert("Best in show") 


Use the objedt alo^ 
wi 七 h the p\ropcv*ty 
y/v-a\>fcd \y\ quotes a 灼 d 
bv-adkc*U *to addess -the 
value o( *tha*t fv-ofev-ty. 


Nov/ y/c use C 3 airou^d 
七 he pv-opev-ty ^arwc- ^ 

^ fido [ ff weight ff ] 

l t 

HcvVs the object". … the fv-ofc\rty 

m quotes. 


❺ Change a property's value ： 




Wt -Pmd dot y\o{^{, i 。 灼 the 

mov-c v-cadablc of -the -two. 



WcVc pido’s 


fido.weight = 27; 
fido.breed = "Chawalla/Great Dane mix"; 


\\\s bvccd- 


fido.loves.push("chewing bones"); <_ j .jj. • ., ,. , 

^ y … 如 d addih 3 a hew item -to his loves avvay. 

C push simply adds B I^cw i*tcm 
*to *bhc cv\d by\ a\rv-ay. 


O Enumerate all an object's properties ： 


/ — To e^umevate is bo 50 -tWou^ all 
YL pvopcv"*tics o-f object- 



var prop; 
for (prop in fido) { 


To c^urncvatc fvofcvtics y/c use d ^ov-'m loop. 

^ EdA tlW'C 七 Wou# loop, 


variable prop yts i\\t s-tv'm^ 
value oJp i\\t 从%七 p\ropcv*ty 


alert ("Fido has a " + prop + " property ’▼); 

if (prop == "name") { u^\ 

alert ("This is n + fido [prop]) ; A^d wc use the i J ho-t^tioh -fco 
} BtCcss the value o( that pv-opev-ty. 

Ko*tc order o-f pvopcv-tics is avbrbravy’ 
so dov^i Co^i or. a pavt»^ula\r ordevm^. 
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what objects can do 


❺ Have fun with an object’s array ： 


var likes = fido.loves; 
var likesString = "Fido likes 


Heve, v/cVc assi^m^ *tV^c value ^c\do s 
loves av*\r3y *to v3\ri3blc likes. 


for (var i = 0; i < likes.length; i++ 
likesString += '▼ '▼ + likes [i] ; 


VVe loof> likes av-vay a^d 

_a likcsS-tvmJ of sll *f'do s m*tcvcs*ts. 


alert (likesString) ; /\^d y/c ^ alcvi the sVmj. 


❻ Pass an object to a function ： 


We 匕 3 灼 f>dss Bv\ object *to 
3 \us*t like 

o 七 hev vav-iaolc- 


else { 

alert( M yip n ) 


function bark(dog) { 

if (dog.weight > 25) { 
alert("WOOF"); ^ 

\ /Ud m "the wc 

CBy\ atdess 七 he object’s 
pv-opcv-tics like ^o\rmaL us'm^ 

} "the pav-arwetev- irtdme -rov- -the 

} object o( douv-sc- 

bark (fido^T^^ IA/cVc passmj -Pido as ouv- 

bo 七 he fur^iem bav-k, y/hidh experts 
d dog object 


The Dot Operator . 

The dot operator (.) gives you access to an object’s properties. 
In general it’s easier to read than the [“string”] notation: 

• fido. weight is the size of fido. 

參 fido. breed is the breed of fido. 

參 fido. name is the name of fido. 

• fido. loves is an array containing fido’s interests. 
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Yes, you can add or delete properties at any time. 


To add a property to an object you simply assign a new property a 
value, like this: 


fido.age = 5; 

and from that point on f ido will have a new property: age. 

Likewise, you can delete any property with the delete keyword, 
like this: 

delete fido.age; 

When you delete a property, you’re not just deleting the value of 
the property, you’re deleting the property itself. In fact, if you use 
fido . age after deleting it, it will evaluate to undefined. 


The delete expression returns true if the property was deleted 
successfully (or if you delete a property that doesn’t exist or if what 
you’re trying to delete isn’t a property of an object). 
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objects as arguments 


Ufs talk about passing objects to functions 

We’ve already talked a bit about how arguments are passed to functions — arguments 
are passed by value, so if we pass an integer, the corresponding function parameter 
gets a copy of the value of that integer for its use in the function. The same rules hold 
true for objects, however we Ve got to look a little more closely at what a variable holds 
when it is assigned to an object to know what this means. 

When an object is assigned to a variable, that variable holds a reference to the object, 
not the object itself. Think of a reference as a pointer to the object. 


fido 


Z 1 

ob\c^*t is assi^cd *to 
a variable, 4c variable is 
3 *to *tV^c object l*t 

docs^*t 七 ^ object 



name ： ''Fido 1 


weight ： 40 


breed ： ''Mixed 1 


loves ： [''walks”，''fetching balls’’] 


So, when you call a function and pass it an object, you’re passing the object 
reference — not the object itself, just a “pointer” to it. A copy of the reference is 
passed into the parameter, which then points to the original object. 


£>dll bavk and pass i*t 
<fido as a” aqu 州⑼七 , v/e yt a 
o^c *tiic Yt^trtY\Ct -to 七 
do^ object. 






function bark(dog) { 
•… code here 


} 


So, what does this all mean? Well, when you change a property of the object, 
you’re changing the property in the original object, not a copy, and so, you’ll 
see all the changes you make to an object within and outside of your function. 
Let’s step through an example using a loseWeight function for dogs... 
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Putting Fido ow a diet.... 

Let’s take a look at what’s going on when we pass fido to loseWeight 
and change the dog. weight property. 


javascript functions and objects 



① 


Weve defined an object, fido, and we are passing 
that object into a function, loseWeight. 

-Pido is a -fco By\ 

object v/hidh -the 
object doesr / 七 live \jn_ "the -Pido 
vav-iablci but is pomtcdjto by 

the -Pido 會 idble. 



fido.weight = 48; 

… 

loseWeight(fido); 



W\\tv\ v/C fass -fido 

•to a 七 ior\ ， v/e are 

f>ass'm 5 i\\t 
•to 七 he object- 


② 


The dog parameter of the loseWeight function 
gets a copy of the reference to fido. And so, any 
changes to the properties of the parameter affect 
the object that was passed in. 


lVKer\ vjc pass -fido m*to losclAfei^t v/ha 七 yts 
assi^cd bo do^ pa\ramc*tc\r is a topy of 
-tiic yt^crty\U) v\o 七 a topy o( *tKc object So 
(\Ao d^d do^ bo *tKc same objedt- 


TV^c vc-fcvc^c 
\s a to?V 
^\do vc<« 






function loseWeight(dog) { 

dog.weight = dog.weight - 10; 


name ： H Fido , 


weight ： 48 


breed ： ''Mixed 1 


loves ： [''walks”，''fetching balls’’] 



So, y/c sub-t\rad*t 10 pounds 
-Pv-orw dojy/cijht v/cVc 
■the value of fido.y/cijht 


alert (fido.name + ’▼ now weighs ’▼ + fido. weight); 



you are here ► 
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introducing webville cinema app 


NOW SHOWING AT 



The Webville Cinema has come to us for help with their 
JavaScript API; let’s start simple and design the movie 
object for them. What we need is a couple of movie 
objects that each include a title, a genre, a movie rating 
(1-5 stars) and a set of showtimes. Go ahead and 
sketch out your movie object design here (you can use 
our dog object as a model). Here’s some sample data 
you can use to populate your objects: 

Plan 9 from Outer Space, which shows at 3:00pm, 
7:00pm and 11:00pm; it's in the genre “cult classic ”； and 
has a 2-star rating. 

Forbidden Planet, which shows at 5:00pm and 9:00pm; 
is in the genre “classic sci-fi”; and has a 5-star rating. 

The soluiio^^s \rijlvt ov\ 七 he 灼 wt page, 
bu*t dov\{, look unr^il you^vc dov\C ihc 

c^c\rdisc. Really. Wc mean it 

youv objects 


腎 —■ 



Peel -fv-cc *to add y ouV " 

ovm -favovites nr\stead. 
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javascript functions and objects 


NOW SHOWING AT I 

How did it go creating your movie object? 

Here’s our solution: 






SOLUTION 




objc^*ts> movie I 扣 d 

movieZ -fov 
*two movies. 





rv^ovicl v^as W trtle, 

sV^oy/ti^cs. 

var movie 1 = { 知仏扣 d avc stvm^s. 

title : "Plan 9 from Outer Space", 

genre : "Cult Classic", 〆 vatm^ is d rtumbev. 

rating : 5, 

showtimes : ["3:00pm M , "7 : 00pm", "11 : 00pm"] 

} ' ^t_ ^ show-times is av\ oi\rv-ay doh-taihi^ the 

show "times o( the movie as s-tvmgs. 

^oV.cZ also Kas W trtlc, 

y^rc, a^d Aoyrt—es. 


var movie2 = { 

title : "Forbidden Planet", 
genre : "Classic Sci-fi", 
rating : 5, 

showtimes : [ n 5:00pm M , n 9 : 00pm"] 


Rcmcmbc\r *to sefavate youv 
pvopcvtics W\{}\ Commas. 


Wt use the same p\ropcv-ty K>ames bui 
d\U^CY\i p\ropc\rty values as moviel. 


you are here ► 
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implementing next showing 


Our wcxt showing is at.... 


We’ve already had a small taste of mixing objects and functions. Let’s take 
this further by writing some code to tell us when the next showing of a 
movie is. Our function’s going to take a movie as an argument, and return a 
string containing the next time it plays, based on your current time. 


•takes a movie object. 


function getNextShowing(movie) { 
var now = new Date().getTime() 


^vdbb'm^ 七 tu\rvcir\*t us'm^ 
JavaS^ipVs pa-tc object. iAfeVc v^oi 50^5 

*to y/oV"vy 3bou*t dc*t 3 ils o^c or\t 
W 七 just kr^oy/ it vetuv^s 

■time \y\ milliseconds. 




for (var i = 0; i < movie.showtimes.length; i++) { 

var showtime = getTimeFromString(movie.showtimes[i]); 
if ((showtime - now) > 0) { 

return "Next showing of ’▼ + movie. title + 


Noy/ use movies a\r\ray, siioy/tn^cs, av\A 
rteva 七 e ovcv i\\t s^oy/timcs. 

Fo\r shovrtime >wc 
i*ts *time m milliseconds dr\d 

•the 灼 ^ompav-c- 


is 


movie. showtimes [i] 


return null 


t l-P the time hasy/ 七 happened yet, its 

"the 灼 c 乂 shoy/'m^ so \rc*tu\rr\ it 

l-P 七 av*C ⑽ mo\rc shov/s, y/c 

jus*t \rrtuv ~ 的 rtull ； 


function getTimeFromString(timestring) { ^ 

^ - 

var theTime = new Date(); 

var time = timestring.match (/ (\d+)(? :: (\d\d))?\s*(p?)/); 
theTime.setHours( parselnt(time[1]) + (time[3] ? 12 : 0)); 
theTime.setMinutes( parselnt(time[2] ) 丨丨 0 ); 
return theTime.getTime(); 

} 

y/ov-v-y about this 6 odej it uses 
c^pv-cssio^s, >n\\\cM youll la*tc\r m you\r 
JavaSdvip't cdudati o«r\. Fov* mov/, jus-t 50 i 七 •, 



@ Reapy Cppe 

Wtrcs some v-cady bake 
CoAt 七 hat just -bakes a 
s-tv-'mj v/i*tli 七 he -Pov-^a-t 
like lsn\ ov* 3pm 


乙 orwev*ts i 七 *to a time 

•m millisedcmds. 


var nextShowing = getNextShowing(movie1); 匕 "" \ 
alert(nextShowing); 

nextShowing = getNextShowing(movie2); 
alert(nextShowing); ] 

let’s do it dgam v/rth rwovicZ- 


Nov/ v/c use ilic -Pu^d-tio^ by dall'm^ ytNc^-tShow'mg 

a 灼 d use -the s*t\r'mg i*t \rrtu\r 灼 s m a 灼 alcv-t 
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javascript functions and objects 



Did you catch this in the previous code? 

movie.showtimes•length 


That doesn’t look like anything we’ve seen before. This is really just a shorthand for a 
series of steps we could have taken to get the length of the showtimes array from the 
movies object. We could have written this instead: 

Pivs*t v/e yab 七 he 

var showtimesArray = movie. showtimes; sWwd 扉心 


var len = showtimesArray.length; 




The 竹 v/c use i*t *to Bttcss 
p\ropc\rty. 


But we can do all this in one shot by chaining together the expressions. 
Let’s step through how this works: 


❶ Evaluate 
to the 


movie.showtimes.length 

❺ W\\\eM V>as 


rwovic 

objedt. 


Q l/Vhidh has 

d showtl^CS 
p\ropc\riy, 
is By\ 
av-v-ay- 


a fvofev-ty 

earned lcir>5*th. 


Testing at the drive - iw 系 

Get the code on the previous page typed in and let’s give it a test run. You’ll see 
that the getNextShowing function takes whatever movie it is handed and figures 
out the next showing time. Feel free to create some new movie objects of your own 
and give them a test drive too. We did, at our own local time of 12:30pm: 


var banzaiMovie = { 

title : "Buckaroo Banzai", 
genre : "Cult classic", 
rating: 5, 

showtimes : ["l:00pm n , n 5:00pm n , "7 : 00pm n ] 

} 

var nextShowing = getNextShowing(banzaiMovie); 
alert(nextShowing); 



Note ： ouv to&t is 灼’七 “f\rodu6tio 灼 

toAt c^ality; 』 you T it a-fw 
las 七 movie siioy/ir^^ you II 丁 1 

a^a'm iiie day © 


you are here ► 
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objects and methods 


Objects caw have behavior too 


You didn’t think objects were just for storing numbers, strings and 
arrays did you? Objects are active, they can do things. Dogs don’t 
just sit there: they bark, run, play catch and a dog object should too! 
Given everything you’ve learned in this chapter, you’re all set to add 
behavior to your objects. Here’s how we do that: 


var fido = { 

name : "Fido ", 
weight : 40, 
breed: "Mixed ", 



loves : ["walks ", "fetching balls"] 

bark : function() { 

alert("Woof woof!"); 

} 




Ra*thcv saym^ this 
is a u -fur>d*tiov> m 
objcd*t> w jus*t say 七 iVis 
is a me 七 hod. ThcyVc 
-the same 七 iVm 少 bu 七 
cvcvyo^c v-c-rcv-s *to objcd*t 

灼 s as methods. 


Wc add a 

div-cd-tly -to ouv- objedi 
like 七 his. 


No-tidc wcVc makmg 

USC O-f dK) ^V\0Y\yn\0[AS 

•function artd assi^'m^ ii 
bo the bark pv-opev-ty o-f 

ihc object. 


Wken an 
object kas a 
Junction in it, 
we say tkat 
object kas a 
metliocL 


To call a method on a object we use the object name along with the 
method using our dot notation, and supply any arguments needed. 



I/Vlc "tell ob\c^ bo do sorwcth'mg 
by rwexhods i-t. "this Cdisc 
>wcVc -fido^s bav-k method. 
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javascript functions and objects 


Meanwhile back at Webville Cinema... 

Now that your knowledge of objects is expanding we can go back and 
improve the cinema code. We’ve already written a getNextShowing 
function that takes a movie as an argument, but we could instead make this 
part of the movie object by making it a method. Let’s do that: 


var movie1 = { 

title : "Plan 9 from Outer Space", 
genre : "Cult Classic", 



rating : 5, 

showtimes : [ n 3:00pm n , n 7:00pm n , "11 : OOpm"] 

getNextShowing : function(movie) { 
var now = new Date().getTime(); 




ouv* CoAt by\A plated i*t 3 
mc*tV>od of movicl object Vrth 七 he 

pvopcvty ytNc 火 tShov/nr^. 


for (var i = 0; i < movie•showtimes•length; i++) { 

var showtime = getTimeFromString(movie.showtimes[i]) 
if ((showtime - now) > 0) { 

return "Next showing of n + movie. title + ’▼ is n 

} 


movie. showtimes [i] 


return null 


Put we know that caw't be quite right... 

We actually can’t just throw the function in this object because 

getNext Showing takes a movie argument, and what we really want is to call 

getNext Showing like this: 

Ko 七 should be needed its dlcav movie 

var nextShowing = movie 1. getNextShowing (); 从 Y/3r\t -the of, is, v/C >w3ir>*t mov/icl. 


Alright, so how do we fix this? We’ve got to remove the parameter from the 
getNextShowing method definition, but then we need to do something with all 
the references to movie . showtimes in the code because, once we remove the 
parameter, movie will no longer exist as a variable. Let’s take a look... 


you are here ► 
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reworking a function as a method 


Lefs get the movie parameter out of there... 

We’ve taken the liberty of removing the movie parameter, and all the references 
to it. Which leaves us with this code: 


var movie1 = { 

title : "Plan 9 from Outer Space' 
genre : "Cult Classic", 


hi^Kli^ivtcd 七 he below. 


rating : 5, 

showtimes : [ n 3:00pm n , n 7:00pm n , n ll:00pm n ], 

getNextShowing : function() { 

var now = new Date().getTime(); 


for (var i = 0; i < showtimes.length; i++) { 

var showtime = getTimeFromString(showtimes[i]); 
if ((showtime - now) >0) { 

return "Next showing of " + title + " is " 


广 f\^\s dll looks p\rc*t*ty reasonable) but WC Y\ttd 

f/i v^oy/ 

mc*tV)odi v/'ill use sV^oy/timcs fvofevt/ … 


… we Ye used b> either loddl vav-idbles 
(\whith showtimes 3K>d global 
vaviablcs (whidh showtirwes isk / 七 ). 
Hvwmrwrw.... 


showtimes[i]; 


return null 




3hd hevVs ^hothev* 
OY\t, the title p\ropcv-ty. 


Now what? 

Alright, here’s the conundrum: we’ve got these references to the properties showtimes and 
title. Normally in a function we’re referencing a local variable, a global variable, or a parameter 
of the function, but showtimes and title are properties of the moviel object. Well maybe this 
just works... it seems like JavaScript might be smart enough to figure this out? 

Nope. It doesn’t work. Feel free to give it a test drive; JavaScript will tell you the showtimes and 
title variables are undefined. How can that be? 

Okay, here’s the deal: these variables are properties of an object, but we aren’t telling JavaScript 
which object. You might say to yourself, “Well, obviously we mean THIS object, this one right 
here! How could there be any confusion about that?” And, yes, we want the properties of this 
very object. In fact, there’s a keyword in JavaScript named this, and that is exactly how you tell 
JavaScript you mean this object we’re in. 

Now, the situation is actually a little more complicated than it appears here, and we’re going to get 
to that in a second, but for now we’re going to add the this keyword and get this code working. 
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Adding the "this" keyword 

Let’s add this each place we specify a property, so that we’re telling JavaScript 
we want the property in this object: 

var movie1 = { 

title : "Plan 9 from Outer Space", 
genre : "Cult Classic", 
rating : 5, 

showtimes : [ n 3:00pm n , n 7:00pm n , n ll:00pm n ], 

getNextShowing : function () { 厂 ttcv-c >wc vc added 3 kcyv/o|rd 

var now = new Date () . getTime () ; \)t(ort cvevy *to si^ni y >wc 

y/ar>*t 七 k mov'icl objedt 

for (var i = 0; i < this.showtimes.length; i++) { 

var showtime = getTimeFromString(this.showtimes[i]); 
if ((showtime - now) > 0) { 

return "Next showing of ’▼ + this. title + ’▼ is ’▼ + this. showtimes [i]; 

} 

} 

return null; 


A test drive with "this" 


Go ahead and type in the code above and also add the getNextShowing function to 
your movie2 object (just copy and paste it in). Then make the changes below to your 
previous test code. After that give it a spin! Here’s what we got: 



var nextShowing = movie1.getNextShowing(); 
alert(nextShowing); 

nextShowing = movie2.getNextShowing(); 



alert(nextShowing); 


^ Note ON 

object Makes move stv\st) docsr\ "t >*t? 


you are here ► 
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code reuse and methods 


It seems like were duplicating 
code with all the copying and 
pasting of the getNextShowing 
method. Isn’t there a better way? 



Ah, good eye. 

You have great instincts if you recognized 
that we are duplicating code when we copy 
getNextShowing into more than one movie 
object. One of the aims of “object-oriented” 
programming is to maximize code reuse — here 
we’re not reusing any code, in fact we’re creating 
every object as a one-off, and our movie objects 
just happen to be the same by convention (and 
copying and pasting!). Not only is that a waste, it 
can be error prone. 

There’s a much better way to do this using a 
constructor. What’s a constructor? It’s just a special 
function we’re going to write that can create 
objects for us, and make them all the same. Think 
of it like a little factory that takes the property 
values you want to set in your object, and then 
hands you back a nice new object with all the 
right properties and methods. 


Let’s create a constructor... 
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javascript functions and objects 


How to create a constructor 

Let’s make a constructor for dogs. We already know what we want our 
dog objects to look like: they have name, breed and weight properties, 
and they have a bark method. So what our constructor needs to do is 
take the property values as parameters and then hand us back a dog 
object all ready to bark. Here’s the code: 


looks 

a lot like a v-ejulav- 
3u*t by CoY\MtY\hov\, v/c jive 

tap’rtal letter. 

function Dog(name, breed, weight) { 



o( -the ^ohs-tvu^-fcov- -take values 
the p\ropc\rtics wc ouv- obje^-t io have. 


The f\ropc\rty 

pa\ranf»C"tc\r Mmes 
doy\{, have to be 
■the sdme, but 七 hey 
o-P-tc^ a\rc—ajam, 

by doKwerrtio 的 . 


this.name = name; 
this.breed = breed; 
this.weight = weight; 
this.bark = function() { 

if (this.weight > 25) 
alert(this.name + 
} else { 



>wcVc 七 ^ 

o*f i\\c objedt bo -the values *tha*t 
passed *to 七 he doy>s*tvud*tov- 

M Uh ihdude the bav-k method ih -the 
fbjd wcVc dohstvud-tma by ihiiializ.iha 
七 ^ baifk yro^bf h> a Ldioh value, 

jusx like wc vc bcch do'ma. 


H 


says Woof!，▼); 


alert (this .name + '▼ says Yip! n ) 


Wt Med "to use ar\d 

W *this.^3mC W m *thc method *to \rc-fcv 
*to the pv-opcv-tics \y\ 七 he object 
jus*t as we have bc-fo\rc. 


Ko*tidc how the sy^ia% di^cv-s -from 
objcd*t sy^ta%. These so v/c 

Y\ttd *to e^d eadh ov\t v/ith a jus*t like 

WC 的 otmdly do m a -Pu^dtio^. 


So let’s walk though this again to make sure we’ve got it. Dog is a 
constructor function and it takes a set of arguments, which just happen to 
be the initial values for the properties we want: name, breed and weight. 
Once it has those values, it assigns properties using the this keyword. It 
also defines our bark method. The result of all this? The Dog constructor 
returns an new object. Let’s see how to actually use the constructor. 


you are here ► 
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using a constructor 



Dont worry about 
building all those objects 
yourself; well construct 
them for you. 


Now let's use our constructor 


Now that we’ve got our factory built, we can use it to create some dogs. 
There’s only one thing we haven’t told you, which is that you need to call 
a constructor function in a special way by putting the keyword new before 
the call. Here are some examples: 


To a ^: A，d the, 6all it iu st 

,. kcahy 

var fido = new Dog("Fido", "Mixed", 38); 
var tiny = new Dog("Tiny", "Chawalla", 8); 



var Clifford = new Dog("Clifford", "Bloodhound", 65); 


fido.bark(); 
tiny.bark(); 



Ov\Ct y/c vc jot objcd-b, 

6dll bav-k methods *to 

make taeM Poj bav-k. 



Do) obj“ts by pass” ih 
di+tC\TCht a\rgumChts io 
dus-tomiic eadh do0. 


Clifford. bark() 


Let’s review what’s going on here one more time: we’re creating 
three different dog objects, each with its own properties, using 
the new keyword with the Dog constructor that we created. 

The constructor returns a Dog object customized with the 
arguments we passed in. 

Next, we call the bark method on each one — notice that we’re 
sharing the same bark method across all dogs, and when each 
dog barks, this points to the dog object that made the call. So 
if we call the bark method on fido, then, in the bark method, 
this is set to the fido object. Let’s look a little closer at how 
that happens. 


http.Y/locaihost 

Fido says Woof! 
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How does this really work? 

Anytime we put this in the code of a method it will be interpreted as a 
reference to the object the method was called on. So, if we call f ido . bark, then 
this is going to reference f ido. Or, if we call it on our dog object tiny then 
this is going to reference tiny within that method call. How does this know 
which object it is representing? Let’s see: 



Let's say weve got a dog object assigned to fido: 


fido = new Dog( M Fido M , "Mixed", 38); 

name ： ’ 、 Fido 〃 

breed ： "MixecT 

weight ： 38 
bark ： func+ion() { ... } 



oiaV* 3ll 

values we y/airrt. 


(2) And we call barkQ on fido ： 


fido.bark() 


this 



name ： ’ 、 Fido” 

breed ： ’’Mixed” 

weight ： 38 
bark ： function() { ... } 




wc ih vok C a r^cihod Oh 

f oi> ^ sets up this 

to pomt io the obj^t iisell 
kc, this points -to -fido. 


^ - so when wc \rc-Pc\r -to 

we know 七 he is w Fido w . 


Y^u ddll bavk oy\ ar>y do^ object 

a 灼 d this will be assia^cd -to -the 

(3) So ' 、 t his 〃 always refers to the object the method was invoked spedi-fid dog bcW youv- body Code 
on, no matter how many dogs we create to bark ： ^ IS 1 


fido.bark() 


tiny.bark() 



this 

name ： "Fido” 

breed ： ''Mixed" 

weight ： 38 
bark ： functionQ { ... } 



this 

name ： '’Tiny” 

breed ： ' 、 Chawalla 〃 

weight ： 8 
bark ： functionQ { 


Clifford. bark() 

this 

name ： ’'Clifford” 

breed ： "Bloodhound” 

weight ： 65 
bark ： func+ion() { ... } 



you are here ► 
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a movie constructor 




Cocte Magnets 

A working Movie constructor function was on the fridge, but some of 
the magnets fell on the floor. Can you help get it back together? Be 
careful, some extra magnets may have already been on the ground 
and might distract you. 


function 


rating, showtimes) 


this.title 


this.genre = genre; 


this. 


rating 


this.showtimes = 


this.getNextShowing = function() { 

var now = new Date().getTime() 
for (var i = 0; i < _ 


.length; i++) 


var showtime = getTimeFromString(this 
if ((showtime - now) > 0) { 

return "Next showing of " + _ 


[i ])； 


is " + this.showtimes[i] 


Wsc these magnets -to 

yr Complete the dodc. 



I Movie I 


I Woof 


I rating ^ 


showtimes 


this.showtimes 



□ 


I bark() | 



「 genre | 


I this [ 
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theve^ciV 

Dumb 


e no o 

Questions 


What’s the real difference between a function and 
a method? After all, if they’re the same thing why call them 
something different? 

A- 

厂 V By convention, if an object has a function we call that a 
method. They both work the same way, except that you invoke 
an object’s method using the dot operator, and a method can use 
this to access the object on which the method is invoked. Think 
of a function as a standalone piece of code you can invoke, and a 
method as behavior that is attached to a specific object. 

So when I create objects with a constructor and those 
objects have a method, then all of those objects share the 
same code for that method? 

A- 

That’s right, and that’s one of the advantages of object- 
oriented programming: you can create the code for that class of 
objects (say all your dog objects) in one place and all the dogs 
share it. Now the way you make it specific to each dog is with 
your properties and using this to access those properties. 

Can I set this to a value of my choosing, and if I do, 
will that mess things up? 

No, you can’t set this to anything. Remember, this is 
a keyword, not a variable! It looks and acts a bit like one, but it’s 
not a variable. 

Does this have a value outside of an object method? 

No, if you’re not invoking an object method, then this is 
undefined. 

So the way to think about this is when I invoke a 
method on an object, the value of this is set to that object 
the entire time the method is being evaluated? 


Within the body of the object, yes, this will always be the 
object itself. There are some advanced cases where it may not 
be true; for instance, things get more complicated when you have 
objects within objects, and if you start doing that, you’ll need to 
look up the semantics, but this is a good general rule. 

I’ve heard that in object-oriented programming I can 
have classes of objects and they can inherit from each other. 
Like, I could have a mammals class that both dog and cat 
inherit from. Can I do that in JavaScript? 

A- 

You can. JavaScript uses something called prototypal 
inheritance, which is an even more powerful model than strictly 
class-based models. Getting into prototypal inheritance is a little 
beyond the scope of this book, but who knows, we could be 
convinced to write more on JavaScript. 

So when we say new Date(), we’re using a constructor, 

right? 

Yes, good catch! Date is a built-in constructor in JavaScript. 
When you say new Date (), you get a Date object with a 
bunch of useful methods you can use to manipulate the date. 

What's the difference between objects we write out 
ourselves and ones we create with a constructor? 

The main difference is how you create them. Objects you 
write out yourself using curly braces and comma separated 
properties are known as “object literals.” You literally type them 
into your code! If you want another one like it, you have to 
type it in yourself and make sure it’s got the same properties. 
Objects created by a constructor are created by using new and 
a constructor function, which returns the object. You can use the 
constructor function to create many objects that have the same 
properties, but different property values if you want. 
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exercise solution 



Code Magnets 


A working Movie constructor function was on the fridge, but some of 
the magnets fell on the floor. Can you help get it back together? Be 
careful, some extra magnets may have already been on the ground 
and might distract you. 

TWis is a so v/C v-c 

u sm 5 u Mov\c' U name. 


function 


I Movie I 




=rating; 



this.showtimes = 
this.getNextShowing = function() { 

var now = new Date().getTime() 


rating, showtimes) 


- IA/c pass m values -fo\r "the pv*opc\rtics v/c 

waivt 七 © dus-tomiic ： 七 rtle, v-atmj 

and showtirwes... 

...mrtializ^ the properties. 

^ - To V"C-Pcv- "to p\ropcv-tics m the object ； 

y/c wed *to use the this keyv/ov-d. 


for (var i = 0; i < 


this.showtimes I .length; i++) 


var showtime = getTimeFromString(this. 
if ((showtime - now) > 0) { 


showtimes 



[i]) 


return "Next showing of 


this.title 


is 


this.showtimes[i] 



Po^*t -fov^ct *to tv\A 七 his 

sta*tcmOr>*t >w’rth a scm*idolor>! 


^ Lc-P-fcovc\r ^aghcts. 



this.showtimes 


I Woof "" I 


□ 


I bark ( 


I this ~~ I 
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Test drive your constructor right off the factory floor 琢 


Now that you’ve got a Movie constructor, it’s time to make some Movie objects! 
Go ahead and type in the Movie constructor function and then add the code 
below and take your constructor for a spin. We think you’ll agree this a much 
easier way to create objects. 


var banzaiMovie = new Movie("Buckaroo Banzai ”， 

"Cult Classic", 

Kotitc >/c avv-ay 5 , 

" ["1:00pm", n 5:00pm n , "7 : 00pm" , "11 : 00pm"]) 


Piv*s ■(: y/C II 3 movie -PoV" 

tk movie Budkavoo ( 0 h C of 

ou\r 乙 ult dlassid -favorites). |/Vc pass ih 
the values -Po\r the favarwetevs. 


value (or sV^ov/tiwcs \r 吵七 … 
七 he -fuy\C-*bioir\ tsll- 


var plan9Movie = new Movie ('▼ Plan 9 from Outer Space ”， 

"Cult Classic", 

<- 

2, 

[ n 3:00pm M , "7 : OOpm", "11 : 00pm"]); 


A^d ne 此 Pbn 1 -Pvorw Ouicv' Spade. 


var forbiddenPlanetMovie = new Movie("Forbidden Planet", 

"Classic Sci-fi", 

5, 

[ n 5:00pm n , "9:00pm n ]); 


/Ud of dou\rsc, Fov-biddch PUhct 


alert(banzaiMovie.getNextShowing()); 
alert(plan9Movie.getNextShowing()); 
alert(forbiddenPlanetMovie.getNextShowing()); 


0r\tt y>*t all ouv objects treated, wc 
cb\\ ytNcx.tShowmg method 

alcv-t -the usev -Pov -the Y\t^i shov/'mj times. 




httpr/ziocalhost 

Next showing of Forbidden Placet j s 5 ;00p：m 



OK 
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tour of common objects 



ttcv-c^s ou\r 

objcdt 


ovm 
movie- 


movie 

title 
genre 
rating 
showtimes 

getNextShowing 


Wt drav/ objcdts like this -to 
show p\rofCV-*tics at the "tor" 

… 3hd methods at the 
bexttor^ so you yt a 'uidk 

o-p "the objed^ i-^s 

pv*opc\rtics av\d methods at 
ohc ^la^e- 


Congrats, youve made it 
through functions and objects! Now that 
you know all about them, and before we end the 
chapter, lefs take a few moments to check out 
JavaScript objects in the wild; that is, in their 
native habitat, the browser! 


Now，you might have started to notice... 

...that objects are all around you. For instance, 
document and window are objects, as are the elements 
we get back from document. getElementByld. 

And, these are just a few of many objects we’ll be 
encountering~when we get to the HTML5 APIs, we’ll 
be seeing objects everywhere! 

Let’s take a second look at some of the objects you’ve 
been using all along in this book: 


Some 

objects y/eW 
akeady v-u^ m-to. 




document 

domain 
title 
URL 

getElementByld 

getElementsByTagName 

getElementsByClassName 

createElement 


button 


window 

document 
location 
onload 
status 

alert 
prompt 
open 
close 

s©tTirn60^ 
setlnterval 


onclick 


input 


value 


ul 

innerHTML 

childElementCount 

firstChild 


appendChild 

insertBefore 
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What is the window object awyway? 

When you’re writing code for the browser, the window 
object is always going to be part of your life. The window 
object represents both the global environment for your 
JavaScript programs and the main window of your 
app, and as such, it contains many core properties and 
methods. Let’s take a look at it: 



Webville Cinema 


ouv v/'mdov/ v/rtii d notable 

pvofCV**tiCS BY\d methods youll *to ky>o>w 
about Thcvc av-c many mon. 


Lotafeo^ V^olds URL. 

Vt ^ \>ro^r 

•tv WRU 

Status V^olds -tV^c shr'^ 

払 a 七 is dis?laved m 
sta^s avea ok ^ Wov/scv. 

You've scch -the alcv-t 
method, it displays 
By\ alcv-fc. 


window 


a 


V\CV/ 


location 
status 
onload 
document 
alert 
prompt 



+J0 http://local host/movie.html 




http://localhost 

Next showing of Buckaroo Banzai is 1:00pm 


: OK 


l^Iontacting "localhost M 




bvoY/scv v/'mdov/. 

^^^>open 
〆 ^> close 


V^>u ve ^cvt^ihly scch -this bc*fov-c ： 
Ohload is a p\ropc\rty that holds 
ihe -fu^-tioh -to ca\\ whe^ -the 
page is -fully loaded- 

TV^c do6umc^*t ?v-ofcv*tv V^olds 

如 POM! 


pvomft like alcv-t 
<fvow 七 V\C wsw. 


Closes "the wihdow. 


Invokes a V^a^alcv- a 

setTimeout t-e mWva. 


setlnterval 


a hahdlcv- oh a spe^i-fied 
ti 州 e ihtcv-val, ovcv- a^d o\/ev. 
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how window.onload works 



We’ve been writing 
''alert 11 , not 、、 window.alerT... 
how does the browser know we 
want the window alert method? 


Window is the global object. 

It may seem a little weird, but the window object 
acts as your global environment, so the names of any 
properties or methods from window are resolved even 
if you don’t prepend them with window. 

In addition, any global variables you define are also 
put into the window namespace, so you can reference 
them as window. myvariable. 


e 



A closer look at wmdow.onload 

One thing we’ve used often so far in this book is a window. onload event handler. 
By assigning a function to the window. onload property, we can ensure our code 
isn’t run until the page is loaded and the DOM is completely set up. Now, there’s a 
lot going on in the window. onload statement, so let’s have another look and it will 
all start to come together for you: 


ttcvVs ou\r global 

window object. 




onload is a propcr-ty 

y/mdoy/ object- 

sP 

window.onload = 
// code here 


This is ar>or>Ymous v/hidii is 

ass'i^ed *bo onload fvofcv-*ty. 

function() { 



o*P dou\rsc the body o-p the -Puhdtioh is 
executed oy\U the window -fully loads the pay 
3hd invokes ou\r ahOhy^ous -fuhdtioh/ 
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Another look at the document object 


The document object is another familar face; it’s the object we’ve been using 
to access the DOM. And, as you’ve just seen, it is actually a property of the 
window object. Of course we haven’t used it like window. document because we 


don’t need to. Let’s take a quick peek under the covers to see its more interesting 

properties and methods: ^ 

The domdrn p\ropc\r*by is domain o-r 

scv-vcv- do 匕 umeirrt is bemg sev-ved -fvorw, 

like wi^kcdlysmav-t ^om. 


pv-opcvtics 


>c*t^ods 




document 


domain 
title < — 
URL ^ 



getElementByld 
getElementsByTagName ^ 
getElementsByClassName 

createElement 


^ 尸 h u” title fvopcvty io get the 

title o\ the dodumCht usihg Joduwht.title. 

The URL is jus*t URL o( -the 
As you k^oy/, *this method ^\rdbs By\ by i-ts id. 

These iv/o a\rc similar -to yt&em ⑶七 Byld, 

■they \rctvicvc clcr^cirb usmj tags and classes. 

f h S ± d .^ ，S 仏 0 d ih Chap-tcv l -to hew 

P 3 _— ms . As you khow it d\rcatcs ele^ehis 
suitable +o\r ihdusioh ih t>0lV[. 


A closer look at document.getElementPyld 


We promised in the begining of this chapter that you'd understand 
document. getElementByld by the end of the chapter. Well, you 
made it through functions, objects, and methods, and now you’re ready! 
Check it out: 


dotumc^t is *tV)C do^thi object, a built-m 

JavaSoft object jWcs you atuss to the 


var div = document.getElementByld( n myDiv n ); 


/ 

gctElcrwChtByld is a 

method that... 


… -takes ov\t *tV^c 

•id a <d'»v> a^d 

vc*tu\nr\s 3y\ clcw'C^'t object 


What was a confusing looking string of syntax now has a lot more meaning, 
right? Now, that div variable is also an object: an element object. Let’s take a 
closer look at that too. 



you are here ► 


157 




















the element object 


One more object to thiwk about: your element objects 


We shouldn’t forget when we’re working with methods like getElementByld that the 
elements they return are also objects! Okay, you might not have realized this, but now that 
you know, you might be starting to think everything in JavaScript is an object, and, well, 
you’re pretty much right. 

You’ve already seen some evidence of element properties, like the innerHTML property; 
let’s look at some of the more notable properties and methods: 


y 0 u know about "iwcv-ttTML; *two 

pvofcrtics arc ^_^ 

tWildiv"Cir\ elemerrt 呼 ） and 

“stCWild M *»s 


You use *tiic methods affcy>dChild 
*mscv*tBc-fov-c *to *mscv*t clcmcy>is *m*to 七 he 


4 


\)0tA as dK*ildvcy> of 七 iVis element 



P 


innerHTML 

ohi,dE,e ； entCo U nt 


appendChild 

insertBefore 

setAttribute 

getAttribute 



a\rc the 

p\rofCV-*tics 
methods -fo\r 

七 he <p> element 
bui all elemeirrb 
suppov-t *thcsc- 


Well use se*t/\tbril)u 七 e gctAttv-ibu-tc b> set 

y 七 attvibutes, like W ’， W dass” ar\d W id' ih clc^Chts. 


D 


there j a 

)umb 


are no o 

Questi9ns 


Since window is the global object, that means I can use 
its properties and all of its methods without specifying window 
first right? 

j/^l That’s right. And whether you prepend the window object’s 
properties and methods with window is up to you. For things like 
alert, everyone knows what that is, and no one uses window with 
it. On the other hand, if you’re using the lesser known properties 
or methods you might want to to make your code more easily 
understandable, and use window. 

So, technically, I could write onload = init 
instead of window. onload = init, right? 


A 


Yes. But we don’t recommend it in this particular case, because 
there are a lot of objects that have onload properties, so your code is 
going to be much clearer if you use window, in front of onload. 

The reason we don’t say window. onload = init () 
is because that would call the function, instead of using its 
value? 

That’s right. When you use parentheses after the function name, 
like init(), you saying you want to call the function init. If you use its 
name without parentheses, then you’re assigning the function value 
to the onload property. It's a subtle difference when you're typing it 
in, but the ramifications are large, so pay careful attention. 
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Which of the two ways of creating a window.onload 
handler is better, using a function name or an anonymous 
function? 

One isn’t better than the other, they both do basically the same 
thing: set the value of window, onload to a function that will run 
when the page has loaded. If you need to call init from another 
function later in your program for some reason, then you’ll need to 
define an init function. Otherwise, it doesn’t matter which way 
you do it. 


What’s the difference between built-in objects like window 
and document, and the ones we make? 

One difference is that built-in objects follow the guidelines 
set by specifications, so you can refer to the W3C specifications to 
understand all their properties and methods. In addition, many of the 
built-in objects, like String, may have properties that are immutable 
and can not be changed. Other than that, objects are objects. The 
nice thing about built-in objects is they’re already built for you. 

^ Yes, is objcd*t| CKcdk ou*t 3 yod 

JavaStv*ip*t v-c-fcvcy>tc *to all details 
of rts pvofcv-tics 3r>d methods. 


you’re leaving this 
chapter knowing more about objects 
and functions than many people out 
there. Of course, you can always learn 
more and we encourage you to explore 
(after you finish this book)! 


Congrats! you’ve completed our tour 
of objects, and made it through several 
chapters of JavaScript bootcamp. Now ifs 
time to use all that knowledge to program with 
HTML5 and all the new JavaScript APIs, 
starting in the very next chapter! 


O 


O 0 


Q 


o 


So take a little R&R after 
this chapter, but before you 
go please take a quick look at the 
bullet points, and do the crossword 
to make it all stick. 
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^^BUUET POINTS - 

■ To create a function, use the function keyword with 
parentheses to hold parameters, if there are any. 

■ Functions can be named, or be anonymous. 

■ Nanning rules for functions are the same as naming 
rules for variables. 

■ The body of a function goes between curly braces, 
and contains statements that do the work of the 
function. 

■ A function can return a value with the return 
statement. 

■ To invoke (or call) a function, use its name and pass 
any arguments it needs. 

■ JavaScript uses pass-by-value parameter passing. 

■ When you pass an object, like a dog, as an 
argument to a function, the parameter gets a copy of 
the reference to the object. 

■ Variables defined in functions, including parameters, 
are known as local variables. 

■ Variables defined outside of functions are known as 
global variables. 

■ Local variables are not visible outside the function in 
which they are defined. This is known as the scope 
of a variable. 

■ If you declare a local variable with the same name 
as a global variable, the local variable shadows the 
global variable. 

■ When you link to multiple JavaScript files from your 
page, all the global variables are defined in the same 
global space. 

■ If you assign a new variable without using the var 
keyword, that variable will be global, even if you are 
first assigning it in a function. 


■ Functions are values that can be assigned to 
variables, passed to other functions, stored in 
arrays, and assigned to object properties. 

■ Objects are collections of properties. 

■ You access an object’s properties using dot notation 
or the [] notation. 

■ If you use [] notation, enclose the property's name 
as a string; for example, myObject[“name”]_ 

■ You can change a property's value, delete 
properties, or add new properties to an object. 

■ You can enumerate an object’s properties using a 
for-in loop. 

■ A function assigned to an object property is referred 
to as a method. 

■ A method can use a special keyword, this, to refer 
to the object on which it was invoked. 

■ A constructor is a function that makes objects. 

■ The job of a constructor is to create a new object 
and initialize its properties. 

■ To invoke a constructor to create an object, use the 
new keyword. For example, new Dog(). 

■ We’ve already been using several objects in this 
book, including document, window, and various 
element objects. 

■ The window object is the global object. 

■ The document object is one of window’s properties. 

■ The document.getElementByld method returns an 
element object. 
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HTMLScross 

It’s been a whirlwind chapter of functions, objects, 
properties and methods—so there’s lots to make stick. 
Sit back, relax, and work the rest of your brain a little. 
Here’s your Chapter 4 crossword puzzle. 



Across 

I. These variables are only available in functions. 
4. The true global object. 

6. The_object represents the DOM. 

II. Arguments are passed by_■ 

12. Use this keyword to start a function definition. 

14. Functions without return statements return this. 

15. A function in an object. 

17. Functions without a name. 

18. What you supply in your function definition. 


Down 

2. This kind of function makes objects. 

3. Functions might or might not include this kind of statement. 
5. Stringing together properties and function calls with the 

dot operator. 

7. A property in window that we assign to a handler function. 

8. What you supply in your function call. 

9. The_operator lets you access an object’s 

properties and methods. 

10. By convention, constructors have a name with 

an_first letter. 

13. Refers to the current object in an object method. 

16. Variable scope that is visible everywhere. 
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exercise solutions 


Use your knowledge of functions and passing arguments to parameters to 
evaluate the code below. After you’ve traced through the code, write the 
value of each variable below. Here’s our solution. 

function dogsAge(age) { 
return age * 7; 

} 

var myDogsAge = dogsAge(4); 


<^^irpen your pencil 


function rectangleArea(width, height) { 
var area = width * height; 
return area; 

} 

var rectArea = rectangleArea(3, 4); 

function addUp(numArray) { 
var total = 0; 

for (var i = 0; i < numArray.length; i++) { 

total += numArray[i]; 

} 

return total; 

} 

var theTotal = addUp([1, 5, 3, 9]); 

function getAvatar(points) { 
var avatar; 
if (points < 100) { 
avatar = "Mouse"; 

} else if (points > 100 && points < 1000) { 
avatar = "Cat"; 

} else { 

avatar = "Ape"; 

} 

return avatar; 

} 

var myAvatar = getAvatar(335); 


c 

myDogsAge = 

iVHic the value 
o( cadh variable 
heme... 

Z0 

IZ 

rectArea = 

theTotal = 

10 

myAvatar = 

Cat 
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HTML5cross Solution 
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Isn’t it amazing how 
all this new technology 
is bringing everyone 
closer together? 


5 making your kml aware 


Geolocation 




Wherever you go, there you are. And sometimes knowing where you are 
makes all the difference (especially to a web app). In this chapter we’re going to show 
you how to create web pages that are location aware — sometimes you’ll be able to 
pinpoint your users down to the corner they’re standing on, and sometimes you’ll only 
be able to determine the area of town they’re in (but you’ll still know the town!). Heck, 
sometimes you won’t be able to determine anything about their location, which could 
be for technical reasons, or just because they don’t want you being so nosy. Go figure. 
In any case, in this chapter we're going to explore a JavaScript API: Geolocation. Grab 
the best location-aware device you have (even if it’s your desktop PC), and let’s get 
started. 


this is a new chapter 


165 







the geolocation api 


Your users are now on 
the move with mobile devices 
that are location aware. The best 
apps are going to be the ones that 
can enhance users* experiences 
using their location. 


O 


Location, Location, Location 

Knowing where your users are can add a lot to a 
web experience: you can give them directions, make 
suggestions about where they might go, you can know 
it’s raining and suggest indoor activities, you can let your 
users know who else in their area might be interested in 
some activity. There’s really no end to the ways you can 
use location information. 

With HTML5 (and the Geolocation JavaScript-based 
API) you can easily access location information in your 
pages. That’s said, there are a few things to know about 
location before we get started. Let’s check it out... 



there jctre no ^ 

Dumb Questi9ns 


Q/ I heard Geolocation isn’t a real API? 

Geolocation is not considered a first-class member of the 
existing HTML5 standard, but that said, it is a standard of the W3C, 
widely supported and pretty much everyone includes Geolocation 
in the list of important HTML5 APIs. And it most certainly is a real 
JavaScript API! 

Is the Geolocation API the same as the Google Maps 

API? 

No. They are completely different APIs. The Geolocation API 
is solely focused on getting you information about your position on 
the Earth. The Google Maps API is a JavaScript library offered by 
Google that gives you access to all their Google Maps functionality. 
So, if you need to display your users location in a map, Google’s 
API gives you a convenient way to implement that functionality. 


Isn’t it a privacy concern to have my device reveal my 
location? 

The Geolocation specification specifies that any browser 
must have the express permission of the user to make use of their 
location. So, if your code makes use of the Geolocation API, the 
first thing the browser will do is make sure it is okay with the user 
to share her location. 

How well supported is Geolocation? 

Very well supported; in fact, it’s available in almost every 
modern browser including desktop and mobile. You’ll want to be 
sure you’re using the latest version of your browser; if you are, 
then you’re probably good to go. 
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The Lat awd Lowg of it... 


To know where you are, you need a coordinate system, and you need one on the 
Earth’s surface. Luckily we have such a thing, and it uses latitude and longitude 
together as a coordinate system. Latitude specifies a north/sourth point on the Earth, 
and longitude, an east/west point. Latitude is measured from the equator, and 
longitude is measured from Greenwich, England. The job of the geolocation API is ( 
to give us the coordinates of where we are at any time, using these coordinates: 


TKc Royal Obscrva-tovy m 
*to be fvcC-'isc* 


Sikcm Valley is 

nr/, - I2J . 私 


Latitude is a dista^c nov-tV^ ov- 
south d c'uaW 


|s/c>w Yov"k Crty * s 
切: n , -卿 


Limd) Peru is 
- IZ.0 弓 , 一 T/.o 午 



•,s 弓 m o 


L-oir\^i*tudic IS d diS"t3K\dC 
cas*t or y/cs*t o( 


PoV""to—NoVO) B 

•,s mm 



LatifWe/LaUglfuJe Ckseup 


You’ve probably seen latitude and longitude speefied in both degrees/minutes/seconds, 
such as (47 。 38,34” ， 122 。 32,32，，), and in decimal values, such as (47.64, -122.54). With 
the Geolocation API we always use decimal values. If you need to convert degrees/ 




minutes/seconds to decimal, you can use this function: 

function degreesToDecimal(degrees, minutes, seconds) { 
return degrees + (minutes / 60.0) + (seconds / 3600.0) 

} 


f[\so 七 

lor^i 七 ude Wcs*t 
latitude Sou*tV) av-c 
v-cpv-cscr\*tcd by 

values. 
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determining location 


How the freolocatiow API determines your location 

You don’t have to have the newest smartphone to be location aware. Even desktop 
browsers are joining the game. You might ask, how would a desktop browser 
determine its location if it doesn’t have GPS or any other fancy location technologies? 
Well, all browsers (in devices and on your desktop) are using a few different ways to 
determine where you are, some more accurate than others. Let’s take a look: 




I scored the newest 
smartphone and Ive got 
GPS built right into the 
phone. Talk about accuracy! 


GPS 

Global Positioning System, 
supported by many newer mobile 
devices, provides extremely 
accurate location information based 
on satellites. Location data may 
include altitude, speed and heading 
information.To use it, though, your 
device has to be able to see the sky, 
and it can take a long time to get a 
location. GPS can also be hard on 
your batteries. 


IP Address 

Location information based 
on your IP address uses an 
external database to map 
the IP address to a physical 
location. The advantage of this 
approach is that it can work 
anywhere; however, often 
IP addresses are resolved to 
locations such as your ISP’s 
local office. Think of this 
method as being reliable 
to the city or sometimes 
neighborhood level. 
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My phone is old school. No GPS on 
this baby. But through cell tower 
triangulation, my phones got a pretty 
good idea of where I am, and the 
browser can make use of this. 


rm on the move from coffee shop 
to coffee shop with my laptop and 
wireless subscriptions. You know where 
I am by triangulating all those wireless 
carriers. Seems to work pretty well. 


Cell Phone 

Cell phone triangulation 
figures out your location 
based on your distance from 
one or more cell phone towers 
(obviously the more towers, the 
more accurate your location 
will be). This method can be 
fairly accurate and works indoors 
(unlike GPS); it also can be much 
quicker than GPS. Then again, if 
you’re in the middle of nowhere 
with only one cell tower, your 
accuracy is going to suffer. 



WiFi 



positioning uses one or more 
access points to triangulate 
your location.This method 
can be very accurate, works 
indoors and is fast. Obviously 
it requires you are somewhat 
stationary (perhaps drinking a 
venti iced tea at a coffee house). 
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method of determining location 



Ifs cool weve got so many 
ways to know where we are. How 
am I going to know which method 
my device is using? 


You’re not. 

The short answer is “you’re not，’’ as 
the browser implementation is going to 
determine how location is determined. But 
the good news is the browser can use any 
of these means to determine your location. 
In fact, a smart browser might first use cell 
phone triangulation, if it is available, to 
give you a rough idea of location, and then 
later give you a more accurate location with 
WiFi or GPS. 

We’ll see that you don’t need to worry 
about how the location is being determined, 
and we’ll focus more on the accuracy 
of your location instead. Based on the 
accuracy, you can determine how useful the 
location is going to be for you. Stay tuned — 
we’ll get back to accuracy a little bit later. 
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i^arpen your pencil 


Think about your existing HTML pages and applications (or ones 
that you want to create); how might you incorporate location 
information into them? 


Allow my users to share with others that are nearby. 


Let my users more easily find local resources or services. 


Keep track of where my user does something. 


Give my users directions from where they are. 


Use location to determine other demographics of my users. 




You\r ideas 
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using the geolocation api 



Just where are you awyway? 


<!doctype html> 
<html> 


All usual s*tu« a*t ^ mdudi% a 1’mk *to ^ 
-file y/iieve >we’ll fu*t ouv Java£tv-ip*t ； myLod js, a^d a 

s-tylcs^cct myLot tss *to make \i all look pyetty. 


<head> 

<meta charset= n utf-8 M > 

<title>Where am I?</title> 

<script src= M myLoc. js n X/script> 

<link rel= n stylesheet" href="myLoc.css"> 
</head> 

<body> 

<div id="location"> ^^ 

Your location will go here. 

</div> 

</body> w 

Put all this HT/WL m a 
-Pile holrwcd myLo^.Ivtml. 


I/Ve,\re gorng -fco w\ri"tc ouv* 
gcolodatioh Codt myLo^.js. 


f[Y\A youVc ^o"m^ *to use 
•this <d*iv> *to ou 七 fu 七 
youv* loda*tioy>. 


</html> 


Well, of course j ⑽ know where you are, but let’s see 
where your browser thinks you are. To do that we’ll just 
create a little HTML: 


Now let’s create myLoc . j s and write a little code; 
we’re going to do this quickly and then come back and 
dissect it all. Add this to your myLoc . j s file: 


window.onload = getMyLocation; 


function getMyLocation() 

if (navigator.geolocation) { 


lA/ c Vc dallmj jclMyLotation as soo^ as 

*b^c bvowsev- loads fajc- 

This IS hov/ v/e dhcdk *fco make su\rc bv-ov/sev suffovis 

/ -the 6^to\otaho^ API； y>avi9a*tov.5colodatior> objedi 

C%'is*ts, *tv>cir> >wc have *l*tf 

l-f i*t dots, wc ddll 5C*tCuv-\rc^*tPosi*tioir\ method d^d pass’m a 
handlcv* disf>layLodd*tio^. iVc’ll 七 his m jus*t d sed- 


navigator.geolocation.getCurrentPosition(displayLocation); 


} else { 

alert("Oops, no geolocation support"); 

> V 

1( 七 he b\roy/sc\r docs NOT suppo\rt jcolodatio^, th ⑶ 
v/e II jus-t pop up 扣 alev* 七七 © 七 he usev-. 


丁 disflayLota-tio^ 

V^dl^r tV^aVs 30^5 -to jet 
•rts V^ar\ds oy\ lod.a*tio\r\. 
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Here’s ouv- y/hidh is ^o'm^ *to ddlled 

y/hci^ *thc bvoy/scv \\Bs a loda*tio^. 



function displayLocation(position) { 

var latitude = position.coords.latitude; 
var longitude = position.coords.longitude; 


ytCu^^tPositio^s \s passed a position 

^\cM latitude a^d lonj.tudc o\ 

youv \otahoY\ (alo^j v/^ some attuv-ady wc 
yt *bo m a 

1/Ve yab i\\c latitude a^d loy^rtude d youv 
lotatioy> -fvom 七 he fosi 七 lorvdoovds objed 七 . 


var div = document.getElementByld("location"); 

div • inner HTML = "You are at Latitude : ’▼ + latitude + Longitude : n + longitude; 


\ 


Tlich wc gv-ab ouv- <div> 

•(Vo 州 HTML... ... arvd -fov wc II \^i set to^i of tV^c 

Uaho^ <aw> bo youv usmj • 義 WTML. 


Test drive your location 吞 

Get this code typed in and take your new location-aware page 
for a test drive. 

When you run a Geolocation web app for the first time, you’ll ^ 
notice a request in the browser asking for your permission to , 
use your location. This is a browser security check, and you’re 
free to tell the browser no. But assuming you want to test this 
web app, you’ll want to click Allow or Yes. When you do, the 
app should show you your location, like this: 



(_) Where am l? 



G? H I© localhost/^aeth/H^. Q g| 


0 




Request p. 


Mission only once 


every 24 hours 




^cep *m m'md 3 loda*t*ioir> \sr!i always 

ms*tciy>*t3'tcous ) i*t 你吵七 *tcikc 3 little y/hile... 


t Thc VC<\uCst -foV pcVm*lSS*ioir> 
may look a d*i-f-Pcv-cir>*t 
oy\ *thc bvov/sev 
youVc usm 少 bu 七 v/ill look 
somC*tK'rn^ like 七 his. 

ttevVs youv lo^at»oir\f Youv* 
lo£.a*t>oir\ will obviously be , 

ou\rs (i-f i*ts 

v\oi wcVc jo'mj *to jet v-cally 

y/oV"V"icd about you)- 

|-f youVc y>o*t youv loda*tioy>, dr>d assum'm^ 

you vc double dhetked *fov* *typos ay>d 七 1 ^七 kmd o( 
七 hm 少 V>old oy> (or d fa^cs av>d v/C II you 
some toAt \p debu^ • 
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reviewing geolocation code 


What wg just did... 


Now that we’ve got some geolocation code up and running (and, again, if 
you’re not seeing a location yet, hold on, we’re getting to some debugging 
techniques in just a sec), let’s walk through the code in a little more detail: 


The first thing you need to know if you're going to write geolocation 
code is ''does this browser support it?" To do that we make use 
of the fact that browsers have a geolocation property in their 
navigation object only if geolocation is supported. ^ 

So we can test to see if the geolocation property exists, and if so 
make use of it; otherwise, well let the user know ： 

_ 1/Ve ddv> use a simple itsi io see i-f ^colodatio^ is 

if (navigator. geolocation) { / (iJf *rt's Y\oi ^av^aiov-.^colodatio^ evaluates 

*to ywa\\ 3iy\A tor>d*rt*ioir> v/ill -fail)- 



else { 

alert("Oops, no geolocation support") 


l*P is theire, v/c Cav\ make use of it, a^d i*f ^oi, 
v/e’ll lei 七 he usev- km>w. 


Now, if there is a navigator.geolocation property, were going to make 
some more use of it. In fact, the navigator.geolocation property is an 
object that contains the entire geolocation API. The main method the 
API supports is getCurrentPosition, which does the work of getting the 
browsers location. Let's take a closer look at this method, which has 
three parameters, the second two of which are optional ： 


Rcmcmbcv") API S j uS *t 
objects Vi*tK p\rofcities ^ 
ar\d methods! Nov/ av-ch *b 

you jlad you did all *tV^c 
JavaSdv-*ip*t i 


■brWnr^ up 


su^cssttar\dilcv- is d 
is tailed i-f bvov/sev is able *to 
sudtcss-fully dc*tcv-mmc youv- lo^atior>.. 


The cv-v-ov-ttay\dlcv- \s 

-tv^at is tailed JOCS y/ro^ a^d 

bv-owsev- cav^i detev-mme youv- lo 乙 a 七 ’em. 


getCurrentPosition(successHandler, errorHandler, options) 


TV^csc *bwo ^>av"amc*tcv"s av*c 
op*tio\r\3l) y/V^idii is wc 
didn't bc?ov-c. 


The options pa\ramc*tc\r 
dllov/s you *to 匕 ustomizjc 
v/ay jcolodatio^ y/o\rks. 
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Now let's take a look at our call to the getCurrentPosition method. 
For now, were supplying just the successHandler argument to handle 
a successful attempt to get the browser location. Well look at the 
case when the browser fails to find a location in a bit. 



if (navigator.geolocation) 



Rcrwcrwbcv* -f\rorw ^1"? 

1/VeYe usmg the hoivigaiov* object -to get 
aucss -to ihc gcolo^atioh obje^i whi 吐 is 
just a p\roJ>c\rty o-p havigatov-. 


navigator.geolocation.getCurrentPosition(displayLocation); 


v/cVc 七 he gcolodaiio^ obje^s 

JciCum^iPosiiio^ mcihod v/iih or>c 

a\rjurwcr>i, 七 he suddess dallbadk. 


l-f when 
de 七 evWmes youv- lodaiio ^； 
•rt will tall displayLoca 七 ion. 




Now let's look at the success handler, displayLocation. When 
displayLocation is called, the geolocation API passes it a position 
object that contains information about the browsers location, 
including a coordinates object that holds the latitude and longitude 
(as well as a few other values well talk about later). 


P*id you Y\ohct wcVc 
^>dss'm^ d -fu\r\d*tioir\ *to 
ar\ 0 *t^CV- -fu\r\dtioir\ V)CV"C? 
Remember -from C^aftcV" 

十 ^c\AY\choY\s av-c 

values, so v/c do 
y\o problem. 


position is 3y\ object s 
pdssedl "nr\*bo youv suttess V>3^dlcv~ 
by ^colofi-3*tioy\ API* 


function displayLocation(position) { 

var latitude = position.coords.latitude; 
var longitude = position.coords.longitude; 


TV^c position obje^-t V^as a toords fv-ofc\r-ty 饮 at 

holds a \rc-fcrchdc *to doord'matcs object... 


var div = document.getElementByld("location") 


… the doovdma-tes objed-t 
holds youv- latitude a 灼 d lo^ji-tudc- 


div. innerHTML = "You are at Latitude : n + latitude + Longitude : n + longitude; 

A 灼 d this pav*t >wcVc suve you day> do *m youv sleep by 
r>ow: y/cVc jus 七 takmg i\\t doo\rd*ma*tc m-fo\rmatioir>, 
diY\d d*isflay'm^ *i*t m a <dw> m 七 k 
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How it all fits together 

Now that we’ve gone through the code, let’s see 
how it all works at runtime: 



ifcP ^ T (Owh 价 am I? 

4- -> C rt . O ^alho$t/^Belh/HT 

Your \oa 


☆ & y 8 A 



The website “http://localhost" would like to 
use your current location. 


Request permission only once every 24 hours 


geolocation then 
asks the user for. 
permission. 


〔 Don’t Allow 〕 Allow 


Browser 


If the user gives permission, then 
geolocation uses the best means it 
can to get the browsers location 
(GPS, triangulation, and so on). 


geolocation 
API 






C A localhost/- Bcth/H O 兑 fl # A 



position.coords.latitude 
position.coords.longitude 




Browser 


And if geolocation can determine the 
browsers location, it calls the success 
handler and passes it an object with 
the coordinates. 
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making your html location aware 


Drive Diagnoses 


When it comes to Geolocation, not every test drive is going to be successful, and even if 
your first test was successful, down the road something is going to go wrong. To help, we’ve 
created a little diagnostic test for you that you can add right into your code. So, if you’re 
having trouble, here’s your answer, and even if you’re not, one of your users is going to have 
an issue and you’re going to want to know how to handle that in your code. So, add the code 
below, and if you’re having issues, kindly fill out the diagnostic form at the end once you’ve 
diagnosed the problem: 


To create the diagnostic test we’re going to add an error handler to the getCurrentPosition 
method call. This handler is going to get called anytime the Geolocation API encounters a 
problem in determining your location. Here’s how we add it: 


caWtd ^ jcolotatio^ -fails -to Ud a Uaho^ 


navigator.geolocation.getCurrentPosition(displayLocation, displayError); 


Now we need to write the error handler. To do that you need to know that geolocation passes 
an error object to your handler that contains a numeric code describing the reason it couldn’t 
determine the location of your browser. Depending on the code, it might also provide a 
message giving further information about the error. Here’s how we can use the error object in 
the handler: 

ouv- is passed 

CV"V"OV" by 6\to\oCdk\OY\ API* 


function displayError(error) { 
var errorTypes = { 

0 : "Unknown error", 

1: "Permission denied by user" 
2 : "Position is not available" 
3 : "Request timed out" 


The c\rv-o\r objcd*t d todt p\ropcv-*ty has d 

number -f\rom O *to a way *to dssodid*te 

cv-v-ov- message eddh dodc m JavaSdv-ip*t ： 

^_ VJt dv-ca*tc objedt with thv-cc p\rofcv-*tics 

earned zjcv-o bo thv-cc- These fv-ofc\rtics art 
sbrmgs 3^ tvyor message v/C *to 
assodia*ke y/ith eddh Code 



var errorMessage = errorTypes[error.code]; 
if (error.code == 0 || error.code == 2) { 


_ f[y\d us'm^ the t^YoY toAt fv-opev-ty, 

v/C assi^ oY\t o-f those stv-mjs h> a 
Y\t^i variable ； cv-v-ov-Mcssajc- 


errorMessage = errorMessage + " n + error.message; 


} t- 

var div = document.getElementByld("location"); 
div.innerHTML = errorMessage; PV 

J\y\A wc add the message b> the fajc b> let ) 

■the usev k 灼 OW. 


I 灼 *thc dasc of cv-v-o\rs zjCYo By\A 
*bwo, is sometimes additioi^l 

'm-po\rma*tio^ m the c\r\ro\r.message 
pv-ofcv-*ty, so wc add -that -to ouv- 
C\r\ro\rMessay 
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Before we run the test, let's take a closer look at the types of errors we can get. 


var errorTypes = 


0 

1 

2 

3 


'Unknown error' 


This is da*tdhall cv-v-ov IS used wh ⑼ Y\ov\t o( 

-the o*tV>cvs make sense. Look io 七 he evvov- messay 
fV*opcV**ty -foV moVC m-fo\rma*tlOir>. 

^ - This the usc\r defied the V-C<\ucst 

Permission denied by user" , ^3kc use o-P lo^d'tioh ih-fo\rrw3"tioh. 

Position is not available", i . ■ i i P i 」 i 

This vrtdiY\s *biie bvov/sev vr\cd, but -railed to 

Request timed out" ^ ^ | 0 da*t*ior>. look b> trroy.^tssay 

4*OV move m-fo\rma*tiOir>. 

^ Well see how *to jcolo^atio^^s dc-fault 

-timeout a little latcv- m *thc dhaftev-. 



Pmally, jcolodatio^ has m-tcv-^al -timeou-t 
scitmj, whidh, i-f t%Utdtd bc-Povc a lodaiiort 
is dc"tc\rrif»*mcd) 匕 duses -this cv-v*ov*. 


When you’ve got the diagnostic test typed in, go 
ahead and give it a try. Obviously if you receive a 
location then everything is working and you won’t 
see any of the errors. You can force an error by 
denying the browser's request to use your location. 
Or you might get creative and, say, move indoors 
with your GPS phone while turning off your network. 
In the worst case, if you wait for a long time without 
getting a location or an error message, most likely 
you’re waiting on a long timeout value to, well, time 
out. We’ll see how to shorten that timeout duration a 
little later in the chapter. 


^ o o 

^vtocaoorir' - - 

Unknown 〜〜 

O 



费 o o 

C My Location 

f -4 O* ▲ 1 ic\~ t 




*ocalhost/ -Beth/HT... 

q} 



Timed out 





只 ^ ©My locatton 

C fi Q localhost/~Betb , HT O ☆ 



Your Diagnostic Results Here 


□ 

□ 

□ 

□ 

□ 


I did not give permission for my location to be used. 

My position wasn’t available. 

After a few seconds, I got a message indicating there was a request timeout. 
Nothing happened at all, no location and no error alert. 

Something else_ 
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Watch it! 


To test your geolocation code on 
a mobile device, you’re going to 
want a server. 


Unless you have a means of loading your 
HTML, JavaScript and CSS files directly 
onto your mobile device, the easiest way to test them is to 
place them on a server (take a peek at the next chapter to 
see how to set up your own server if you want) and access 
them there. If you’ve got a server and you want to do that, we 
encourage you to do so. On the other hand, if that doesn’t 
work for you, we’ve made sure the code is available on the 
Wickedly Smart servers so that you can test on your mobile 
devices. That said, we encourage you to follow along with the 
code on your desktop, and once you have it working there, 
then test on your mobile device using the server (your own or 
Wickedly Smart). 

For the first Test Drive (including the error diagnostic), point 
your device to http://wickedlysmart.com/hfhtml5/chapter5 / 
latlong/myLoc.html. 


Revealing our secret location... 

Now that you’ve got the basics out of the way, let’s do something 
more interesting with location. How about we see how far you are 
from our secret writing location at Wickedly Smart HQ? To do that 
we need the HQ^ coordinates and we need to know how to calculate 
distance between two coordinates. First, let’s add another <div> to 
use in the HTML: 


<body> 

<div id="location n > 

Your location will go here. 

</div> 

<div id= n distance') 

Distance from WickedlySmart HQ will go here. 
</div> 

</body> 

</html> 


tJiereicire no ^ 

Dumb Questions 


The latitude and longitude returned 
by the app for my location aren’t quite 
right, why is that? 

There are a variety of ways that your 
device and the location service provider 
calculate your position, and some are more 
accurate than others. GPS is often the most 
accurate. We’re going to look at a way to 
determine the accuracy estimate that the 
location service gives back as part of the 
position object so you can see how accurate 
to expect the location data to be. 



VV*,dkcalv Smart Head 公 uarters is 
a 七 AVl^O°\% 


、 /\dd tWis <dw> -to youv- HTML. 


you are here ► 


179 













ready bake code to compute distance 


Some Rdapy idu Cppe: computing distance - 

Ever wanted to know how to compute the distance between two points on 
a sphere? you'll find the details fascinating, but they're a little outside 
the scope of this chapter. So, were going to give you some Reapy BaK6 Cope 
that does just that. To compute the distance between two coordinates 
most everyone uses the Haversine equation; you’ll find it implemented 
below. Feel free to use it anywhere you need to know the distance 
between two coordinates ： 

This "t^kcs -two doovdi^a-tcs, b s-tavt 

厂 匕 oodmate d dcs-tmatior) doov-di^a-tc, and 

( v-ctuv-^s -the dis-ta^dc m kilorwctcv-s between 七 hem. 

function computeDistance(startCoords, destCoords) { 

var startLatRads = degreesToRadians(startCoords.latitude); 
var startLongRads = degreesToRadians(startCoords•longitude); 
var destLatRads = degreesToRadians(destCoords.latitude); 
var destLongRads = degreesToRadians(destCoords.longitude); 

var Radius = 6371; // radius of the Earth in km 

var distance = Math.acos(Math.sin(startLatRads) * Math.sin(destLatRads) + 

Math.cos(startLatRads) * Math.cos(destLatRads) * 

Math.cos(startLongRads - destLongRads)) * Radius; 



return distance; 


function degreesToRadians (degrees) { ^11 s« more m 

var radians = (degrees * Math.PI) /180; Canvas 

return radians; 


Add "this -to youv* myLodjs -file. 
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Writing the code to find the distance 

Now that we’ve got a function to compute the distance between 
two coordinates, let’s define our (that is, the authors’）location 
here at the Wickedly Smart HQ(go ahead and type this in too): 


var ourCoords = { 

latitude : 47.624851, 
longitude : -122.52099 





wcVc *to 
a literal object -fov- 
toov-d*ma*tcs o-f ouv- lo^at»or\ a*t 
Sma\rt Add 
{\\\s as a global vav-iablc a*t *tV^c 
o*f youv" myLofi- js -f ile- 



VVc v/ay»*b *to 七 he 

distaste -fv-om you *to us, 
as -tV>C tYO^N -flics. 



And now let’s write the code: all we need to do is pass the coordinates of 
your location and our location to the compute Distance function: 


function displayLocation(position) { 

var latitude = position.coords.latitude; 
var longitude = position.coords.longitude; 


var div = document.getElementByld("location"); 

div. innerHTML = "You are at Latitude : ，▼ + latitude + 


var km = computeDistance(position.coords, ourCoords); 
var distance = document• getElementByld('’distance ，'）； 
distance. innerHTML = "You are ，▼ + km + ’▼ km from the WickedlySmart HQ 


Longitude : ’▼ + longitude ; 

y/cVc pass'm^ C.oov*dnr\ 3 *tcs 

o-f youV" fos*i*tioy\ ^y\A also oiaV" 
toov-d'matcs to dompu*tcP»s*ta^C. 


^[y\d wc take the results by\A update the 
the dis*ta^dc <div>. 


Location-enabled test drive 


Now let’s give this new code a test drive. Go ahead and finish adding 
the code to myLoc . j s and then reload myLoc. html in your browser. 
You should see your location and also your distance from us. 

YouV loda*t»oir\ 3ir\d dis*t3r\dC 

y/iII obviously be 

oy\ y/)icv"C you 3 v*c 

m y/o\rld. 


n n 


Where am f? 




3 ° Uareat LatitUde： 47 62485 彳， Longitude^ 2；52099 " 
You are 0 km from the WickedlySmart HQ 



Try Irttp://widkcdlysmav-tdom/h-fh-tml^/dhap*tc\r^/dis*ta^c/myLod irtml 
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adding google maps 



You know, seeing 
my location as 34.20472, 
-90.57528 is great, but a map 
would really come in handy 
right now! 


Mapping your position 

As we told you up front, the Geolocation API is pretty simple — it gives you a way to 
find (and as you’ll see, track, as well) where you are, but it doesn’t provide you with 
any tools to visualize your location. To do that we need to rely on a third-party tool, 
and as you might guess, Google Maps is by far the most popular tool for doing that. 
Obviously Google Maps isn’t part of the HTML5 spec, but it does interoperate well 
with HTML5, and so we don’t mind a little diversion here and there to show you 
how to integrate it with the Geolocation API. If you want to be diverted, you can 
start by adding this to the head of your HTML document and then we’ll work on 
adding a map to your page: 


<script src="http : //maps.google.com/maps/api/js?sensor=true"X/script> 


This is lodatio^ o-f -the 

^oojlc Maps JavaSoft API- 


' Make suv-c you -type 七 iVis cx.ad*tly as is, mdludm^ s ⑶ 

c^ucv-y API 七 >wov*k Vrthou 七 *tKis). Wlc vc 

us'm^ sc ⑽ ov* 二 *tvuc bcdausc ouv toAt is us*m^ youv lodatioir>. 

v/C v/CV~C jus*t us.nr^ 七 he Vi 七 V>ou 七 youv lod^'tioh ； \wC d 

•type scy>sov=-ralsc. 
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How to add a Map to your Page 

Now that you’ve linked to the Google Map API, all the functionality of Google Maps 
is available to you through JavaScript. But, we need a place to put our Google Map, 
and to do that we need to define an element that is going to hold it. 



Diversion 


<body> 

<div id="location n > 

Your location will go here. 
</div> 

<div id= n dis tance n > 


Distance from WickedlySmart HQ will go here. 
</div> 


<div id= n map"> 
</div> 

</body> 

</html> 




ttcv-c s <dw>. Note v/e’ve dc-f'mcd some style 
•m myLod dss 七 iia 七 sets map <div> *to 

by 午 OOf% W\i\\ a bladk bov-dc\r. 


Getting ready to create a map 


To create the map we need two things: a latitude and longitude (and we know how to 
get those), and we need a set of options that describe how we want the map created. 
Let’s start with the latitude and longitude. We already know how to get them with 
the Geolocation API, but the Google API likes them bundled up in its own object. 

To create one of those objects we can use a constructor supplied by Google: 


Voy\{, -Povyt, 
^OhS-t\rud-to\rs stavt with 
Icttcv-. 


var googleLatAndLong = new google.maps.LatLng(latitude, longitude) 


googlc.^ps all the 个 

methods the google /Waps API- 


ttevVs 七 I 化 doy>stv*u£.*fcov*> v/hidK ouv* 

3r>d vc*tuv-y>s d y\Cvj ob\cd*t 七 ha 七 holds bo*th. 


Google gives us some options we can set to control how the map is created. For 
instance, we can control how far zoomed in or out the initial map view is, where 
the map is centered, and the type of map, like a road-style map, a satellite view, 
or both. Here’s how we create the options: 


var mapOptions = 
zoom: 10, 




The Zjoom o^hoY\ CaY\ be spc^i-Picd 0 -to zl. with the zx>om ： bi^JCV- numbers 

doV"V"Cspo^d *fco zoomed mo\rc (so you set w>oV"C detail)* \0 is dbou*t 


center : googleLatAndLong, 




Were ’s ou\r ^cv/ objedi v/c just dv-catcd. We the 
r^ap -to be oy\ this lodati. 


AOY\- 



mapTypeld: google . maps . MapTypeld. ROADMAP 



Vo\a also i\ry SATELLITE av\d 
HYBRID as options hc\rc- 
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code to display map 


displaying the Map 

Let’s put all this together in a new function, showMap, that takes a set of 
coordinates and displays a map on your page: 



Offload 

Diversion 


var map; 


a global variable map, 七 ha 七 is -to hold Ihc 与 003k map 
aHe\r we Create it V^ll see how -this gets used m a bit 


i 


function showMap(coords) { 
var googleLatAndLong = 

new google.maps.LatLng(coords.latitude, 

coords.longitude) 

var mapOptions = { 
zoom: 10, 

center : googleLatAndLong , 

mapTypeld: google.maps.MapTypeld.ROADMAP 

}； 

var mapDiv = document.getElementByld("map"); 
map = new google.maps.Map(mapDiv, mapOptions); 


1/VcVc assijh'mg 

v\C>n Map object "to ouir 

global variable …外 


aho-thev dohs-tv-u^-tov- -Pvorw 6\oo^\cs 
API) takes by\ ele 你 eh 七 av\d ouv- 
options a^d dv-catcs a^d a 你 ap 

object 


Wc use ouv* latitude 3ir>d lo^^i*tudc 
-fvom 七 he toovds objed 七 … 

..•dv>d use b> a 

^oo^lc mafs.La'tL.^^ objcd*t- 


l/Ve d\rcaic the rwapOp-tio^s 
objedi v/iih 七 he options wc 
wa^-t -fco sci -fov- ouv- map- 

-Pmally, wc jv-ab 七 he 你 ap <div> 

-Pv-orn -the D0M and pass _七 and the 
•^apOp-tiohS -to 七 he /Wap do^s-tvud-tov 
b> trcaic the jooglc r^aps-Map object 
This displays -the r^p m OUV" pay. 


Go ahead and add this code to your JavaScript file at the bottom. And now we just need 
to tie it into our existing code. Let’s do that by editing the displayLocation function: 


function displayLocation(position) { 

var latitude = position.coords.latitude; 
var longitude = position.coords.longitude; 


var div = document.getElementByld("location"); 

div. innerHTML = "You are at Latitude : '▼ + latitude + Longitude : '▼ + longitude; 


var km = computeDistance(position.coords , ourCoords); 
var div = document.getElementByld("distance"); 

distance. innerHTML = "You are '▼ + km + '▼ km from the WickedlySmart HQ n ; 

l/Vell ta\\ shoW\/Iaf -Prom displayLodatio^ wc vc 
uf>da-bed the other <div>s the faje- 


showMap(position.coords); 
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Test drive your new 
heads-up display 

Make sure you’ve added all the new 
code on the previous page and also 
added the new map <div> to your 
HTML; then reload your page and, 
if the browser can determine your 
location, you’ll see a map. 


Diversion 


OUV Y\t^l 

6joo^\t 


^/cVc sV^oy/nr\^ kikev* s 

lodat»oh a*t ^ 2 - 0 ^ 12 -) ^ 

一 ”05*7 细 ; d bourse youVc 
^okdkly sow»cv/V^cv-c else- 



七七 y^cav- Y 0 冰 


Try http:/ / v/idkcdlysmav-tdom/h-fh-tml^/dhap*tc\r^/map/myLod*tml 
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adding a google marker 

Sticking a Pm m it 



offload 

Diversion 


It would be more useful if you could see exactly where you’re 
located on the map. If you’ve used Google Maps, then you’re 
probably familiar with the push pins used to mark the location 
of items you search for. For example, if you search for Space 
Needle in Seattle, WA, you’ll get a map with a pin near the 
Space Needle area in the city, and if you click on the pin, you’ll 
see an information window with more details about the item. 
Well, push pins are called markers, and they are one of the 
many things offered in the Google Maps API. 

Adding a marker with a pop-up information window requires 
a little code because you have to create the marker, the 
information window, and a handler for the click event on the 
marker (which opens the information window). Given we’re on 
a diversion, we’re going to cover this fairly quickly, but at this 
point in the book, you’ve got everything you need to keep up! 


Space Needle ☆ 

219 4th Avenue North 
Seattle. WA 98109 
(206) 905-2180 

spaoeneedle.com 
★★ 俞 ★ 28 reviews 



0 - 



f / >6 

J 


9 - 

* w 



Thom« SI 




Directions Search nearby Save to 
map moreV 



|| 丨， ■/ 磨 Cnlhe* 

"Cornp*n« 


JonnSt John sr M 




(Y ou seavA fov •扣 rtcm rn 

\ Maps, WII SCC a rtd tKc 

s^>o*t sc 3 v*tV> \rcsul*t- 


① Were going to start by creating a new function, addMarker, and then 
use the Google API to create a marker ： 


The addMav-kcv- -takes a a ^ooglc-s*tylc 

latitude by\A lor^i*tudq a trtlc -Pov- -the mavkcv, av\d 
also some dorrt ⑶七 -Pov \ y\(o y/'mdow. 



function addMarker(map, latlong, 
var markerOptions = { 
position : latlong, 
map: map. 


title, content) { 


l/Ve by \ options object with the biiiude a^d 
longitude, the the title, whethev- ov- hot wc wa^-fc 
七 he nr»avkc\r *to be did^ble... 


title : title, 
clickable : 



… we sc*t i*t *to *tv*uc heve bdcausc wc *to be able 
*to display an m-Po wmdow i*t is dlidkcd- 


var marker = new google.maps.Marker(markerOptions); 

} v/c dv-catc ihc r^avkcv- object by us’mg yet 

a^othev- do^stv-ud-to\r -Pirorw 6\oo^\cs /\PI, 3^d pass i 七 
the rwavkev-Op'ticms objed-t wc dv-catcd- 
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② 


Next were going to create the info window by defining some options specific 
to it, and then create a new InfoWindow object with the Google API. Add the 
code below to your addMarker function ： 


function addMarker(map, latlong, title, content) { 

^ - Ouv- othcv- Code is still hcv-c, v/cVc just sav'm^ some "tvccs … 


var infoWindowOptions = 


content : content, 


position : latlong 




Now v/cVc jo'mj -to dc-P'mc some options (o\ 
七 he m-Po v/'mdoy/- 

l/Vc v\tt& "the 

… a^d the latitude dr\d lo^gi-tudc- 


var infoWindow = new google.maps•InfoWindow(infoWindowOptions); 

y/i 七 h that v/e dv-catc 七 he m-Po v/mdo>w. 


google.maps.event.addListener(marker, "click", function() { 


infoWindow.open(map); 


})； 


W\\tv\ the m«l\rkc\r is d\C\itd, 
this -Puh^tioh is called av\d ihe 
ih-Pol/Vihdow ope^s oy\ "the 你外 . 


T 

iVe pass 七 he lis-tc^cv- d 
-fu^diioK> ihai geis called 
when ihc usev- dlidks ov\ 

七 he r^av-kcv-. 


Kc%*t use ^oo^lc /VlafT^ ,, 
3ddL>S*tc^CV" nr\C"t^od "to bAA B lis*tcir\CV" 

(or *tKc c\\ck event. A [\sitv\tr is just like 
3 ^ar\dlcv") like onload a^d omU ， 七 i^a 七 
you vc alv-cady sttv\- 


③ Now all that’s left to do is call the addMarker function from showMap, making 
sure we pass in all the right arguments for the four parameters. Add this to 
the bottom of your showMap function ： 


var title = "Your Location"; 

var content = "You are here: " + coords. latitude + ’▼, '▼ 
addMarker(map, googleLatAndLong, title, content); 


+ coords.longitude; 


l/Ve pass m the map av\d 
3oo^lcLa*t/\hdLohg objects we 

^v*c3*tcd us'mg -the google API." 


... Bv\d d title sfcriy^ By\A 



s*tv"m^ -fov the mav-kcv". 
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more google maps 


Testing the marker 


Get all the code for addMarker added, update showMap to call 
addMarker and reload the page. You’ll see a map with a marker with 
your location on it. 


Try clicking on the marker. You’ll get a pop-up window with your 
latitude and longitude. 


This is great, because now you know exactly where you are (just in 
case you were lost or something...) 



what ouv 
七 he mav-kcv* 


•mlo 


w'rndow pop—uf looks like- 



Offload 
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Tvy 。灼 I’me: ivttp://wi 乙 kedlysmav " 七匕 om/ivfmav-kcv-/myLod.h*tml 


The other cool things you caw do with 
the froogle Maps API 

We’ve only scratched the surface of what you can do with the Google Maps API, and 
although this API is way beyond the scope of this book, you’re well on your way to 
being able to tackle it on your own. Here are some things you can consider using it for, 
and some pointers to where to start. 

Controls: By default, your Google map includes several controls, like the zoom control, 
the pan control, a control to switch between Map and Satellite view, and even the Street 
View control (the little pegman above the zoom control). You can access these controls 
programmatically from JavaScript to make use of them in your applications. 

Services: Ever looked up directions in Google Maps? If so, then you’ve used the Directions 
service. You have access to directions, as well as other services, like distance and street view 
through the Google Maps services APIs. 

Overlays: Overlays provide another view on top of a Google map; say, a heat map overlay. 
If you’re commuting, you can check traffic congestion with the traffic overlay. You can create 
custom overlays, like custom markers, your photos, and pretty much anything else you can 
imagine, using the Google Maps overlay APIs. 

All this is available through the Google Maps JavaScript API. To take your experiments further, 
check out the documentation at: 

http :// code.google.com/apis/maps/documentation/javascript/ 
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making your html location aware 



Ge©l©c3tUoift 苌； tpose 』 

This week’s interview: 

A conversation with a wannabe HTML5 API 


Head First ： Welcome Geolocation. I gotta say right 
up front, I’m a bit surprised to see you here. 

Geolocation: Why’s that? 

Head First ： You’re not even “officially” part of the 
HTML5 spec and here you are, you’re the first API 
that’s been given a chapter! What’s up with that? 

Geolocation ： Well, you’re right that I’m defined 
in a specification that’s separate from the HTML5 
specification, but I am an official specification of the 
W3C. And, just look around, any mobile device worth 
its salt has me already implemented in its browser. I 
mean what good is a mobile web app without me? 

Head First ： So what kind of web apps are making 
use of you? 

Geolocation ： Really, it’s most of the apps people are 
using on the move; from apps that let you update your 
status and include geo information, to camera apps 
that record where pictures are taken, to social apps that 
find local friends or allow you to “check in” at various 
locations. Heck, people are even using me to record 
where they cycle or run or eat or to get where they’re 
going. 

Head First: Your API seems a bit simplistic, I mean 
you’ve got, what, a couple of methods and properties 
total? 

Geolocation ： Small and simple is powerful. Do you 
see many complaints about me out there? Nope. I’ve 
got what every developer needs and location-aware 
apps are getting cranked out by the dozen a day. Plus, 
small equals quick and easy to learn, right? Maybe 
that’s why I’m the first API with his very own chapter? 


Geolocation ： That’s a short topic because I’m 
supported in almost every browser, on desktop and 
mobile. 

Head First ： Okay, so one thing I’ve always wanted 
to ask you: what good are you on a device that doesn’t 
have GPS? 

Geolocation ： There’s a big misconception that I’m 
somehow dependent on GPS. There are other great 
ways to determine location today through cell phone 
triangulation, using IP addresses, and so on. If you 
have GPS, great, and in fact I can help you even more; 
but if not, there are lots of ways to get location. 

Head Rrst: Help even more? 

Geolocation ： If you’ve got a good enough mobile 
device I can give you altitude, direction, speed, all 
kinds of things. 

Head First: Say none of those methods work, that 
is, GPS, IP address, triangulation, then what good are 
you? 

Geolocation ： Well, I can^ always guarantee you’re 
going to get a location, but that’s okay because I do 
give you a nice way to handle failures gracefully. All 
you have to do is give me an error handler and I’ll call 
it if I have a problem. 

Head First ： Good to know. Well, that’s all we have 
time for. Thank you, Geolocation, for being here and 
congrats for getting promoted to a real W3C standard. 


Head First ： Let’s talk about support. 
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geolocation api details 

Meanwhile back at the freolocatioH API... 

We’ve already travelled a fair distance with the Geolocation API: we’ve 
determined our location, computed distances to other locations, handled 
the error states of the API and even added a map using the Google Maps 
API. But it’s not time to rest yet, we’re just to the point of getting into the 
interesting parts of the API. We’re also at that point between knowing 
about the API, and having mastery over it, so let’s keep moving! 

One thing we need to do before going on is to take a closer look at the 
API itself. We’ve talked about it enough, but we’ve never actually looked 
at it. As we’ve been saying, the API is actually really simple, having just 
three methods: getCur rent Position (which you know 
something about), watchPosition 
(which you’ll find out about soon enough), 
and clearWatch (which, you guessed 
it, is related to watchPosition). Before 
getting to these two new methods, let’s take 
another look at getCur rent Posit ion 
and at some related objects, like the 
Position and Coordinates objects. 

You’re going to find a few new things there 
you didn’t know about. 


Geolocation 

getCurrentPosition 

watchPosition 

clearWatch 



The methods 七 
a\rc pav-*t 

6 \to\otBhoY\ API- 


CV-V-OV- V^a^alcv- »s tailed y/b 卞 b^roy/s^ 
its Uaticm. h 

av-c possible v-casoy\s -fov- that 


getCurrentPosition(successHandler, errorHandler, positionOptions) 


Remember ihc suddess ha^dlcv (o>r dallba^k) is 
tailed when a loda-tio^ is deiev-mmed, and rt is 
passed d posrtior> object. 



Z 7 


Position 


coords 


timestamp 


IA/is khow about the doo\rds p\ropcv*"ty ； but 
s dUo d "tirwCS"tolirhp p\ropC\rty \y\ posi 七 i 
七 hat ^OhtaihS the time -the position object 

This C^y\ be usc-Pul -Po\r khowih^ how 
old the lo^d'tioh is. 


I oh 


wds 




have a^o*thc\r pav-amc*tcv- v/c 
used yc*t allows us 七 © 
-fmc—*tuir»c behavior o-f ^eolodd*tio^. 


Coordinates 


latitude 

longitude 

accuracy 

altitude 

altitudeAccuracy 

heading 

speed 




女一 


Wc ky\oy/ about 
Iat»*tudc loy\^»*tudC) 
bu*t av-c otKcv- 
pv-o\>cv-*t«cs m 七 he 

toov^dn^S'tcs 

a\rc gu^v-ahtccd 
■to be thc\rc.* lat, loh^ 
3hd oid^uva^y. 


The ves-t may 

o\r r>r»ay 

be suppovtcd, 
dcpc^d'mj oy \ 
youv device- 
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making your html location aware 


Caw we talk about your accuracy? 

Finding your location isn’t an exact science. Depending on the method 
the browser uses, you may know only the state, city, or city block you’re on. 
Then again, with more advanced devices you might know your location to 
within 10 meters, complete with your speed, heading and altitude. 

So how do we write code, given this situation? The designers of the 
Geolocation API have made a nice little contract with us: every time they 
give us a location they’ll also give us the accuracy, in meters, of the location, 
to within a 95% confidence level. So, for instance, we might know our 
location with 500 meters accuracy, which means that we can be pretty 
darn sure we can count on the location as long as we factor in a radius of 
500 meters. And for 500 meters, we’d be safe, for instance, giving city or 
neighborhood recommendations, but we might not want to provide street 
by street driving directions. In any case, it is obviously up to your app to 
figure out how it wants to make use of the accuracy data. 



Enough talk, let’s find out what your accuracy looks like in your current 
location. As you’ve just seen, the accuracy information is part of the 
coordinates object. Let’s pull it out and use it in the displayLocation function. 


function displayLocation(position) { 

var latitude = position.coords.latitude; 
var longitude = position.coords.longitude; 
var div = document.getElementById( n location ”）； 


div. innerHTML = "You are at Latitude : '▼ + latitude + Longitude : '▼ + longitude; 


div. innerHTML += ’▼ (with '▼ + position. coords. accuracy + '▼ meters accuracy) M ; 


var km = computeDistance(position•coords, ourCoords); 
var div = dociament.getElementByld("distance"); 


^ ttcv-c y/e use *thc adduv-ady fv-opcv-*ty 
o-f position, affadl o^*to 
the <dw>’s mwttTML-. 


distance. innerHTML = "You are '▼ + km + '▼ km from the WickedlySmart HQ n ; 


showMap(position.coords); 


Accuracy Test 

Make sure you’ve got this one liner added to your code, and load the 
page. Now you can see how accurate your location is. Be sure to try this 
on any device you have. 

TVy o 灼 I’mc: irttp:// / a^duvaty/myLod h-tml 
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tracking movement 


"Wherever you go, there you are" 

The orgin of this phrase has been hotly debated. Some claim the 
first real mention of it was in the film Buckaroo Banzai, others draw 
its origin from Zen Buddhist text, still others cite various books, 
movies and popular songs. No matter the source, it’s here to stay, 
and even more so after this chapter because we’re going to turn it 
into a little web app named “Wherever you go, there you are.” Yes, 
there is an app for that! But, we’re going to need a little participation 
from you, the reader, because for this one you’ll have to (excuse us 
for saying this) get off your butt and move around a little. 


What we’re going to do is extend our current code so that it tracks 
your movements in real time. To do that we’re going to bring 
everything together, including last two methods in the Geolocation 
API, and create an app that tracks you, in near real time. 

How we're going to track your movements 

You’ve already received a heads up that the Geolocation API has a watch Position 
method. This method does what it says: it watches your movements and reports your 
location back as your location changes. The watch Position method actually looks just 
like the getCur rent Position method, but behaves a little differently: it repeatedly 
calls your success handler each time your position changes. Let’s see how it works. 



do you dome ih oh 七 he 
dcba-tc? Is the saying a ^odui o( 
the Bahiai (hs-ti-tutc, ov av-c the 
o\rigms m Z-Ch litcv-a-tuv-c? 




① Your app calls 
watchPosition, 
passing in a success 
handler function. 


(2^ watchPosition sits 
in the background 
and constantly 
monitors your position. 


Browser 



position.coords.latitude 
position.coords.longitude 



④ watchPosition 
continues to 
monitor your position 
(and report it to your 
success handler) until 
you clear it by calling 
clearWatch. 



⑤ When your 
^ position changes, 
watchPosition calls 
your success handler 
function to report 
your new position. 
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making your html location aware 


ftettmg the app started 

We’re going to use our previous code as a starting point; first we’re going 
to add a couple of buttons to the HTML so that we can start and stop 
the tracking of your location. Why do we need the buttons? Well, first 
of all, users don’t want to be tracked all the time and they usually want 
some control over that. But there’s another reason: constantly checking 
your position is an energy-intensive operation on a mobile device and 
if it’s left on all the time, it will cause your battery life to suffer. So, first, 
we’ll update the HTML to add a form and two buttons: one to start 
watching your position and one to stop. 


<!doctype html> 

<html> 

<head> 

<meta charset= M utf-8 n > 

<title>Wherever you go, there you are</title> 





a user m v-cal time 乙扣 be a 
veal ba*t*tcv-y dv-amcv*. Alakc sure you 
jive usev m-pov-ma*tio^ about *thciv 
By\A some 乙 oirrbrol over i*t, "boo- 


<script src= n myLoc. js"X/script> 

<link rel="stylesheet" href="myLoc.css"> 
</head> 



<body> 

<form> 

<input type="button" id= n watch" value="Watch me"> 

<input type= "button" id= n clearWatch M value=" Clear watch'▼> 
</form> 

<div id="location"> 


Your location will go here. 


1/VcVc ddd'm^ a *fo\rm 
*t>wo 

bu*t*to^s, ohC *bo s*toi\r*t 
*tV>C >w*rbii 

id of w v/a*ttV> w > 
oY\t bo dlcav- *thc 

v/rth 扣 id d 

W dlcav-1/Va*tdh w . 


</div> 

<div id="dis tance"> 


1/VcYc -fco \rcusc ouv- old <div>s {o v-epov-t 

V*c3l—time lodd'tioK) 灼 . 


Distance from WickedlySmart HQ will go here• 


</div> 


<div id= n map n > 
</div> 

</body> 

</html> 



lA/c II bddk drtd v/o\rv*y dbou't 

七 he google map \Y\ a bit.. 
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using watchposition 


Reworking our old code. 


So now we need to add button click handlers for the two buttons. We’ll add them to 
the getMyLocation function only if there is geolocation support. And, since we’re 
going to control all the geolocation tracking using the two buttons, we’ll remove the 
existing call to getCur rent Posit ion from getMyLocation. Let’s go ahead and 
remove that code, and add two handlers: watchLocation for the watch button, and 
clearWatch for the clear button: 

l*P the b\roy/sc\r supports jcolodatioh, v/cll add ouv button didk 
function getMyLocation () { lia^dlcv-s. Ko poiirrt m add'mj tiicrw i-f JColodatio^ is / 七 suppo\rtcd- 

if (navigator.geolocation) { 

navigator.ge olocation. getCurrentPosition(displayLocation , displayError) 
var watchButton = document.getElementByld("watch"); 
watchButton.onclick = watchLocation; 

var clearWatchButton = document.getElementByld("clearWatch"); 
clearWatchButton.onclick = clearWatch; 



else { 

alert("Oops, no geolocation support"); 




IVcVc *bo ta\\ 
y/a*t^hLo^a*tioi^ *bo s*ta\rt 七 he 

*to s*bop i*t- 


Writing the watchLocation handler 

At this point, here’s what we’re trying to do: when the user clicks on the watch button, they 
want to start tracking their position. So, we’ll use the the geolocation . watchPosition 
method to start watching their position. The geolocation. watchposition method has 
two parameters, a success handler and an error handler, so we’ll reuse the ones we already 
have. It also returns a watch Id, which can be used at any time to cancel the watching 
behavior. We’re going to stash the watch Id in a global variable, which we’ll use when 
we write the click handler for the clear button. Here’s the code for the watchLocation 
function and the watchld ， go ahead and add this code to myLoc . j s: 


var watchld = null 




Add v/aidMd a 七七 he iof youir (\\t as a global variable. IA/cVc 

W(C II t\tt& "tKiS U't-CV' "to dlcSV" 


function watchLocation() { 

watchld = navigator.geolocation.watchPosition(displayLocation , 

displayError); 

l/Ve’ve dall'mj ihc wat^Posrtio 的 method, passing ihc suddess handler y/e ; ve 

alveady displayL-o£.a*tio^ ouv cV"\ro\r displayEv"V"oy. 
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Writing the clearWatch handler 

Now let’s write the handler to clear the watching activity. To do that we need to take the 
watchld and pass it to the geolocation. clearWatch method. 


Make suv-c a v/a*Uh|d *th 


function clearWatch() { 

if (watchld) { 

navigator.geolocation.clearWatch(watchld); 
watchld = null; 


...dall the jcolodatio^ 
method, pass'mj m the wa*t^h|d- 
This s*tops *thc 


We still need to make a small update to displaylocation... 

There’s one small change we need to make and it involves the Google Maps code 
we previously wrote. In this code we call showMap to display the Google Map. 

Now, showMap creates a new map in your page, and that is something you only 
want to do one time. But remember, when you start watching your location with 
watchPosition, displayLocation is going to get called every time there is an 
update to your position. 

To make sure we only call showMap once, we’ll first test to see if the map exists and 
if it doesn’t, we’ll call showMap. Otherwise, showMap has already been called (and 
has already created the map) and we don’t need to call it again. 

function displayLocation(position) { 

var latitude = position.coords.latitude; 
var longitude = position.coords.longitude; 

var div = document.getElementByld("location"); 

div.innerHTML = "You are at Latitude : " + latitude + n . Longitude : " + longitude; 
div. innerHTML += ’▼ (with '▼ + position. coords. accuracy + ’▼ meters accuracy) n ; 

var km = computeDistance(position.coords , ourCoords); 
var distance = document.getElementByld("distance"); 

distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ"; 

l-f wc haven't called showMap alv-cady, 

乙 all it otherwise wc do 灼’七 y\ttd *bo dal I i 七 

} cvev-y -time displayLocation is called- 


if (map == null) { 

showMap(position.coords); 
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testing user tracking 


Time to get moving! 

Make sure you’ve got all the new code typed in and reload your page, myLoc. html. 
Now, to truly test this page you’re going to need to “relocate” to have your position 
updated. So take a walk, jump on your bike, get in the car, or use whatever your 
favorite mode of transportation might be. 

It almost goes without saying that if you’re running this on your desktop, this app is 
going to be pretty boring (since you can’t take it with you), so you really need to use 
a mobile device for this test. And, if you need help getting to a hosted version with 
your mobile device, we’ve placed a copy of this code at: 

http : // wickedlysmart. com/hfhtml5/chapter5/watchme/myLoc . html. 



Wtrts, ouv itsi ^- 


These y>umbcv-s 
will ufda*tc as 
you move av-ouy>d 


Ko*tc 七 he map IS jus 七 
-fco ttr^Cr oi\ youv mi 七 ial 

-fov 灼 o>w... 


^ — - - 

--- 

- A ~~~ ~~~~~ ■~~ - 


TVy ivbtp://y/idkcdlysmav-*tdom/h-fh*tirr»|^/watdhmc/myLod h-tml 
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Dumb Quest? 


9ns 


How can I control the rate at which the browser is 
providing updates of my location when using watchPosition? 

譬 

• You can't. The browser determines what the optimal update 
rate is and decides when you’ve changed positions. 

Why does my location change a few times when I first 
load the page, even though I’m sitting still? 

Remember we said the browser may use a few methods to 
determine your location? Depending on the method (or methods) 
the browser is using to determine your location, the accuracy of the 
location may change over time. In general the accuracy gets better, 
but sometimes (say, you’ve just driven into a rural area with only one 
cell tower) it may get worse. And you can always use the accuracy 
property in the position.coords object to keep an eye on accuracy. 

Can I use the altitude and altitudeAccuracy properties of 
the coordinates object? 


These properties are not guranteed to be supported (and 
obviously are going to be supported on only high-end mobile devices), 
so you’ll have to make sure your code handles the case where they 
aren’t. 

What are heading and speed? 

Heading is the direction you're traveling in and speed is how 
fast you’re going. Think about if you’re in a car heading north on 
Interstate 5 at 55mph. Your heading is north, and your speed is 
55mph. If you are in your car in the parking lot at Starbuzz Coffee, 
then your speed is 0 and you have no heading (because you’re not 
moving). 

When I map the distance from my location to your location, 
it’s a lot longer than is being reported in the app, why? 

Remember, our distance function is computing the distance “as 
the crow flies.” Your mapping tool is most likely giving you the driving 
distance. 


i^arpen your pencil 


Below you’ll find an alternative implementation for 
displayLocation. Can you guess what it does? Take a look and write 
your answer below. If you’re feeling adventurous, try it out! 


distance . innerllTML = "You are 11 ~~Ikm~~I ~~ 11 km from the WiekedlyGmart IIQ 11 ; 

if (km < 0.1) { 

distance.innerHTML = "You're on fire! n ; 

} else { 

if (prevKm < km) { 

distance.innerHTML = "You're getting hotter !”； 

} else { 

distance. innerHTML = "You' re getting colder 

} 

} 

prevKm = km; 


Wrtc you 
七 Wmk 七 Wis docs V^cvc. 
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overview of geolocation objects 


You've got some Options... 

So far we’ve stayed away from the third parameter of getCur rent Position (and 
watchPosition): the positionOptions parameter. With this parameter we can 
control how geolocation computes its values. Let’s look at the three parameters along 
with their default values: 


var positionOptions 




p.vst y/c v^avc a "伏切 滅 enables ⑽叫 ) 

^|| ialk akou*t 七^七 mca ⑽ m a set … 


enableHighAccuracy : false r 


timeout : Infinity, 



maximumAge : 0 



pmally> of*t'ior\ sets 

oldesi a \otaho^ be bcW tVjc 
bvoy/sc\r r^ccds *to ^taldulatc \otat\o^ by 
ac-fault tw»s »s mws broy/sev 

will alv/ays V^avc -to v-ctaltula*tc *»*b lodaton 
(cvcvy -time jctC^c^tPosrt'io^ »s died). 


The timeou-t option do 灼 "brols how the bv-owsev 

*to dc*tcV"m"mc i*ts lod-cl-tio^. By dc-fault this is 
set *to m-Pmrty the bvov/sev yts all 

time i*t heeds). 


/ou Qh \rcsct this -fco a value ih millis 比 cmds, 
say IOOOO, -this gives -the b\rowse\r tch 
sc^ohds -fco -Pihd a lo^atioh, othcv-wisc the 
e\r\ro\r ha^dlcv- is ^lled. 


Can we talk about your accuracy, again? 

We’ve already seen that each position handed to us by the Geolocation API has an 
accuracy property. But, we can also tell the Geolocation API that we’d like only the 
most accurate result it can get. Now, this is only meant as a hint to the browser, and 
in fact, different implementations may do different things with the hint. And, while 
this option doesn’t sound like a big deal, it has lots of implications. For instance, 
if you don’t care that your results are super accurate — you might be just fine 
knowing that your user is in Baltimore — the API might be able to tell you that 
very quickly and very cheaply (in terms of power consumption). If, on the other 
hand, you need to know the street your user is on, that’s fine，but the API might 
then have to fire up GPS, and use lots of power to get that information. With the 
enableHighAccuracy option, you’re telling the API you need the most accurate 
location it can get, even if it is costly. Just keep in mind, using this option doesn’t 
guarantee the browser can give you a more accurate location. 
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making your html location aware 


The world of timeouts and maximum age... 

Let’s review once again what the timeout and maximumAge options are: 

timeout ： this option tells the browser how long it gets to determine the 
user’s location. Note that if the user is prompted to approve the location 
request, the timeout doesn’t start until they’ve accepted. If the browser can’t 
determine a new location within the number of milliseconds specified in the 
timeout, the error handler is called. By default, this option is set to Infinity. 

maximumAge ： this option tells the browser how old the location 
can be. So, if the browser has a location that was determined sixty 
seconds go, and maximumAge is set to 90000 (90 seconds), then a call to 
getCur rent Position would return the existing, cached position (the 
browser would not try to get a new one). But if the maximumAge was set to 30 
seconds, the browser would be forced to determine a new position. 




So by using 
maximumAge I can 
really tune how often my browser 
recalculates or determines my position. 
I can see how using that can make my 
app faster and more power efficient. 
What about timeout? How can I use it 
to improve things? 


You’re right on with your thinking on maximumAge. 

For timeout, think about it like this: when you’re using 
maximumAge so you get an old (cached) result, as long as 
that result is younger than the maximumAge you specified, 
this works really well to optimize the performance of your 
app. But what happens when the position’s age exceeds the 
maximumAge? Well, the browser goes off and tries to get a 
new one. But, what if you don’t care that much — say you’ll 
take a new location if it has it, but otherwise, you don’t need 
it right now. Well, you could set timeout to 0, and if there 
is a result that passes the maximumAge test, great, here it 
is, otherwise the call will fail immedately and call your error 
handler (with an error code of TIMEOUT). That’s just one 
example of the creative ways you can use timeout and 
maximumAge to tune the behavior of your application. 
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exercise on using geolocation options 


♦ 






O 办轚 




Below you’ll see a few options for the geolocation API. 
For each option, match it to its behavior. 


{maximumAge : 600000} 


I want only cached positions less than 
10 minutes old. If there aren’t any 
cached positions less than 10 minutes 
old, I ask for a new position, but only 
if I can get one in 1 second or less. 


{timeout:1000 A maximumAge:600000} 


I’ll use a cached position if the 
browser has one that’s less than 10 
minutes old, otherwise, I want a fresh 
position. 


I want only fresh positions. The 

{timeout : 0 , maximumAge : Infinity} browser can take as long it wants to 

get me one. 


I want only cached positions. I’ll take 
{timeout : Infinity, maximumAge : 0 } one of any age. If there is no cached 

position at all, then I call the error 
handler. No new positions for me! I’m 
for offline use. 
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making your html location aware 


How to specify options 


One of the nice things about JavaScript is that if we want to specify a set of options in an 
object, we can just type in a literal object, right into the middle of our method call. Here’s 
how you do that: let’s say we want to enable high accuracy and also set the maximum age of 
the location to be 60 seconds (or 60,000 milliseconds). We could create options like this: 

var options = {enableHighAccuracy : true, maximumAge : 60000}; 

And then pass options to either getCurrentPosition or watchPosition, 

like this: 


bet you s-tavtmg -to see 
that JavaSdvip-t v-cally 
vodks? Well, at Icas-t 

th'mk i-t docs. 


navigator.geolocation.getCurrentPosition( 


displayLocation, 
displayError, 
options); 


ttcv-c, v/cVc 
dlorv^ usm^ 


%us*t ouv- options 

o^*tior\S v3v*i3blc- 


Or, we could just write the options object inline, like this: 

navigator.geolocation.getCurrentPosition( 

displayLocation, 
displayError, 

{enableHighAccuracy : true, 


You II see this 

used a lot 
•m JavaSd\rip*t todt- 

maximumAge : 60000 }); 


ttcv-c arc *thc options, 

v/\ri*bte 灼 as a litcv-al 

objedt 七 m the 

dall| Some would 
this is casicv a 灼 d 

mov-c readable as todc 



Now that you know the options, what they do, and how to specify them, we should use them. 
We’re going to do that, but remember, these are meant to tuneyour application, which will 
have its own unique requirements. These options are also affected by your device, browser 
implementation and network, so you’ll need to play on your own to fully explore them. 


Drive Diagnostics (Jiec 切 

When you ran the diagnostics before, did you get the test case where you waited and waited and nothing 
happened? That’s most likely because of the infinite timeout. In other words the browser will wait forever to get 
a location as long as it doesn’t encounter some error condition. Well, now you know how to fix that, because we 
can force the Geolocation API to be a little more expedient by setting its timeout value. Here’s how: 

function watchLocation() { 



watchld 




navigator.geolocation.watchPosition( 


displayLocation, 
displayError, 

{timeout : 5000}); 


i*t a -tv-y a^d -Peel -Pv-cc h> J 
adjus-t the option values. 一 ^ 


By 七 irneou 七 * to ^OOO milliscfi-o^cls ^ 

stCov\ds) youVc suve kvoy/sev docsia 

si 七七 kve -fovcvcv *to a loda 七 ior\. 
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TRY THIS AT II0M1 ； 

(PUSHING GEO TO THE LIMIT ) 

Wouldn’t it be fun to see how fast your browser can find your location? 
We could make it as hard for your browser as we can: 

■ let’s ask it to enable high accuracy, 

■ let’s not allow it to use a cache (by setting maximumAge to 0) 

■ let’s time it by setting the timeout option to 100, and then increase 
the timeout every time it fails. 

Warning: we don’t know if all devices and their batteries are up to this, 
so use at your own risk! 

Here’s what the intial options are going to look like: 


{enableHighAccuracy : true, timeout: 100, maximumAge : 0} 

tr 

{enableHighAccuracy : true , timeout : 200 , maximumAge : 0} 


❿ 


Well s*tav 七 iieve … 
-fails y 

i*t move 七 


{enableHighAccuracy : true, timeout: 300, maximumAge : 0} so ow 


Now check out the code on the next page, you’ll find it quite interesting. Go 
ahead and type it in — you can just add it to your JavaScript in myLoc. j s. Try 
it on your various devices and record your results here: 




^^ time hc\rc 

ON 

FOUND IN 

milliseconds 

ON 

FOUND IN 

milliseconds 

ON 

FOUND IN 

milliseconds 

ON 

FOUND IN 

milliseconds 


T\ry irttp://v/idkedlysmav " 七匕 orw/ivfspccd*tcs*t/speediestI 
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by mitializi% ouv options W\{\\ a 4 
imcou-t 100, 3v\d a ma%'n^u^A5C o( 0. 


var options = { enableHighAccuracy : true, timeout:100, maximumAge: 0 

window.onload = getMyLocation; £ 

function getMyLocation() { 如 

if (navigator.geolocation) { 

navigator.geolocation.getCurrentPosition( 
displayLocation, 
displayError, 
options); 

} else { 

alert("Oops, no geolocation support") 


Do 七 he usual displayLocation 

d^d displayEv-\rov- as ou\r sud^css av\d 
cv-v-ov f>ass'm^ *m options as 

■the "UVivd pav-am*tcv-. 


function displayError(error) { 
var errorTypes = { 


lVe’11 do cv-vov iiar\dilcv- *f ivs 七 . 


0 : "Unknown error", 

"Permission denied", 
"Position is not available", 
"Request timeout" 




TKis Code Kcvc is *bKc same … 


var errorMessage = errorTypes[error.code]; 
if (error.code == 0 || error.code == 2) { 

errorMessage = errorMessage + " " + error.message; 


var div = document.getElementByld("location") 
div.innerHTML = errorMessage; 
options.timeout += 100; 

navigator.geolocation.getCurrentPosition( 
displayLocation, 
displayError, 
options); 

div.innerHTML += " ... checking again with timeout= M + options.timeout; 


But *m i\\t cast of a -failuve, 
y/cVc *to mdvease 七 he 

*timCou*t of*tior\ by lOOms 3iad 
ivy Well \ti usc\r know 
y/cVc as v/cll- 


function displayLocation(position) { 

var latitude = position.coords.latitude; 

var longitude = position.coords.longitude; 

var div = document.getElementByld("location"); 

div.innerHTML = "You are at Latitude : " + latitude + 

Longitude : " + longitude ; 

div. innerHTML += " (found in " + options. timeout + ’▼ milliseconds) n ; 
叫⑶七 he bv-owsev suddcss-fully 5 «*b youv- fositio^, well let usev kr>o>w \\o^j lo^5 \i *took. 
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adding a path to the map 



Lefs finish this app! 

When you sit back and think about it, with just a little 
HTML and Java Script you’ve created a web app that not 
only can determine your location, but it can also track 
and display it in near real time. Wow, HTML sure has 
grown up (and so have your skills!). 

But, speaking of this app, don’t you think it needs just a 
little bit of polish to finish it off? For instance, we could 
show your position on the map as you move around, and 
we could even go further and show where you’ve been 
too, to create a path through the map. 

Let’s write a function to keep the map centered on your 
location as you move around, and drop a new marker 
each time we get a new position: 


S , y/cVc *to Ml 七 W’s 

f,oh s^ollMa\>ToPos»t»o^ 

ay\d v/cVc *to pass 't*t a 


The doovdma 七 es aire jomg -fco be youv la-tcs-t 灼 ew 
position, so wcVc jo'mj -to oy\ -that 

loda*tio^, dv-op a ^av-kcv- -thcv-c -too. 


function scrollMapToPosition(coords) { 
var latitude = coords.latitude; 
var longitude = coords.longitude; 
var latlong = new google.maps.LatLng(latitude, longitude); 

-- > The pa^lo method o-f map -takes -the La*tLr\g object and sdv-olls 

map .panTo (latlong) , 七 he 你外 so you\r 灼 cv/ lodatio^ is a*t o\ *thc map- 

addMarker(map , latlong, "Your new location ”， "You moved to: n + 

latitude +，▼, " + longitude); 

Fmally, v/c II add a ma\rkc\r -Po\r you\r \otahov\ usmj -the add/Wavkcv- wc 

价 0 七 e ca^rlic^ passmj rn -the map, -the U 七 u 3 objedi a hi\c U Ihc 

Y\t^i Hf»a\rkc\r. 




pivs*t IcVs yab la*t 

\oy\^, diY\d ertait a ^oo^lc mafs. 
LatLy>^ objedi (or -them. 
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IwtGgratiwg our new fuwctiow 

Now, all we need to do is update the displayLocation function 
to call scrollMapToPosition each time your position changes. 
Remember that the first time displayLocation is called, we’re 
calling showMap to create the map and display a marker for 
your initial location. Each time after that we just need to call 
scrollMapToPosition to add a new marker and re-center the 
map. Here’s the code change: 

function displayLocation(position) { 

var latitude = position.coords.latitude; 
var longitude = position.coords.longitude; 
var div = document.getElementById( n location ”）； 
div.innerHTML = "You are at Latitude : n + latitude 




+ ”， Longitude : n + longitude; 

div.innerHTML += " (with " + position.coords.accuracy + " meters accuracy) n ; 
var km = computeDistance(position.coords, ourCoords); 
var distance = document.getElementByld("distance"); 

distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ"; 


if (map == null) { 



The -first time displayLodatio^ is dallcd ； wc 
•to draw the maf Bv\d add the -fiv-s*t mav-kcv-. 



And one more time. 


00° 


Reload your page and start moving around... is your 
map following you? You should see a trail of markers 
being added to your map as you move (unless you’re 
sitting at your desktop!). 

So, we submit this application as solid proof that 
'wherever you go, there you are.” 




Ouv *tva*il <^f mav-kev-s 

OY\ d VCdCir>*t 

-fvom iVidkcdly 
£mav-*t *to 
scdvc*t ur>dcv-youy>d 
Uiv … oh v/a'rt> 
shouldn't K3 vc said 
•that.. 


T\ry oirJme: / v/idkedlysma\r 七 dom/ivfwa 七匕 hrwepan/rwyLo^ h-tml 


showMap(position.coords); 
else { 

scrollMapToPosition(position.coords); 


/Vf 七伙七此 all Y\ttd do is add a 
mavkcv- *to 七 lie map. 


you are here ► 205 





optimizing marker usage 



Code Magnets - 

Before we conclude this chapter, we thought you might want 
to really polish up this app. You might have noticed (under 
some circumstances) that there are just a few too many 
markers being added to the map when you’re watching your 
position? 

What’s happening is that watchPosition is detecting 
movement frequently, so it’s calling the displayLocation 
success handler every few steps or so. One way to fix that 
is to add some code so we have to move some significant 
distance, say 20 meters for testing purposes, before we create 
a new marker. 


We already have a function that will compute the distance 
between two coordinates (computeDistance), so all we 
need to do is save our position each time displayLocation is 
called, and check to see if the distance between the previous 
position and the new position is greater than 20 meters 
before calling scrollMapToPosition. You’ll find some of the 
code below to do that; it’s your job to finish it. Watch out, 
you’ll have to use some magnets more than once! 



var _; 

function displayLocation(position) { 

var latitude = position.coords.latitude; 
var longitude = position.coords.longitude; 
var div = document.getElementByld("location"); 

div. innerHTML = "You are at Latitude : " + latitude + Longitude : " + longitude; 
div.innerHTML += " (with " + position.coords.accuracy + " meters accuracy) M ; 
var km = computeDistance(position.coords, ourCoords); 
var distance = document.getElementByld (’ ▼distance ”）； 

distance.innerHTML = "You are " + km + " km from the WickedlySmart HQ"; 
if (map == null) { 

showMap(position.coords); 

prevCoords = _; 

} else { 


var meters = _(position• coords, prevCoords) * 1000; 

if ( > ) { 
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making your html location aware 


^^BUUET POINTS - 

■ Geolocation is not “officially” part of the 
HTML5 specification, but it's considered 
part of the “family” of HTML5 specs. 

■ There are a variety of ways to determine 
your location, depending on the device you 
have. 

■ GPS is a more accurate method of getting 
your location than cell tower triangulation or 
network IP. 

■ Mobile devices without GPS can use cell 
tower triangulation to determine location. 

■ The Geolocation API has three methods 
and a few properties. 

■ The primary method in the Geolocation 
API is getCurrentPosition, a method of the 
navigator.geolocation object. 

■ getCurrentPosition has one required 
parameter, the success handler, and two 
optional parameters, the error handler, and 
the options. 

■ A position object is passed to the success 
handler with information about your 
location, including your latitude and 
longitude. 

■ The position object contains a coords 
property, which is a coordinates object. 

■ The coordinates object has properties 
including latitude, longitude and accuracy. 

■ Some devices may support the other 
coordinates properties: altitude, 
altitudeAccuracy, heading, and speed. 

■ Use the accuracy property to determine 
how accurate your location is in meters. 


■ When getCurrentPosition is called, your 
browser must verify that you have given 
permission to share your location. 

■ watch Position is a method of the 
geolocation object that monitors your 
location and calls a success handler when 
your location changes. 

■ Like getCurrentPosition, watchPosition has 
one required parameter, a success handler, 
and two optional parameters, an error 
handler and options. 

■ Use clearWatch to stop monitoring your 
location. 

■ When watchPosition is used, your device 
will require more energy, so your battery life 
may be shortened. 

■ The third parameter, options, for 
getCurrentPosition and watchPosition, is an 
object with properties you set to control the 
behavior of the Geolocation API. 

■ The maximumAge property determines 
whether getCurrentPosition will use a 
cached position, and if so, how old that 
position can be before a fresh position is 
required. 

■ The timeout property determines how much 
time getCurrentPosition has to get a fresh 
position before the error handler is called. 

■ The enableHighAccuracy property gives a 
hint to devices to spend more effort getting 
a highly accurate location if possible. 

■ You can use the Geolocation API with the 
Google Maps API to place your location on 
a map. 
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exercise solutions 



HTML5cross 

YouVe traveled quite far in this chapter 
with your first JavaScript API. Make it 
stick with this crossword. 



Across 

4. Longitude is measured from_ ， England. 

7. Accuracy has implications for your app because it can 

affect_life. 

8. If you say no when your browser asks you to share your 
location, your error handler will be called with 

an_code of 1. 

9. “Wherever you go, there you are” was mentioned in the 

movie_. 

10. Don’t give driving directions to someone if your 

coordinates don’t have a good_. 

11. The secret location of the_HQ is 

47.62485,-122.52099. 


Down 

1. Re-center your map using the_method. 

2. Old Skool devices without GPS use cell tower 
_to determine your location. 

3. The latitude, longitude of_is 40.77, -73.98 

5. You'll never get a cached location if you set 
_to 0. 

6. You can use the_equation to find the 

distance between two coordinates. 
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making your html location aware 



Code Magnets 


It’s your job to finish the code below, so we only display a new 
marker if we've traveled more than 20 meters since the last marker 
was added. Use the fridge magnets to complete the code. Watch out, 
you’ll have to use some of them more than once! Here’s our solution. 


var J prevCoords = null; 


function displayLocation(position) { 

var latitude = position.coords.latitude; 
var longitude = position.coords.longitude; 
var div = document.getElementByld("location"); 

div. innerHTML = "You are at Latitude : '▼ + latitude + n . Longitude : '▼ + longitude; 
div.innerHTML += " (with M + position.coords.accuracy + n meters accuracy)"; 
var km = computeDistance(position.coords , ourCoords); 
var distance = document.getElementByld("distance"); 


distance.innerHTML = "You are 
if (map == null) { 

showMap(position.coords); 


km 


km from the WickedlySmart HQ' 



(position.coords, prevCoords) * 1000; 


scrolIMapToPosition(position.coords); 

prevCoords 


position. coords 



I\/\\aCM brbtev! 


TVy ivttp:/ / y/idkcdllysirwav-tdom/h-fh-tirwl^/-fmal/nf\yLod h*tm| 
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exercise solutions 


%|harpen your pencil 

Solution 


Below you’ll find an alternative implementation for displayLocation. Can 
you guess what it does? Take a look and write your answer below. If you’re 
feeling adventurous, try it out! Here’s our solution. 


distance.innerHTML = "You are 


-km- 


km from the WiekedlyGmart IIQ 1 


if (km < 0.1) { 

distance.innerHTML = "You're on fire! 
} else { 

if (prevKm < km) { 

distance.innerHTML = 

} else { 

distance.innerHTML = 


You' re getting hotter !’▼; 


You' re getting colder 


prevKm = km; 


七 C ^a*t you 
tWmk tWis docs 


This Code *tu\nr\s ouv app *m*bo a Cold |*t displays 
a hotter” message i-f youVc dlosev- to *the 

iVidkcdlySmavt or w ge*t*tm3 doldev w i-f youVe mov*m^ 
a>way. l-f you’re wi-thm 0.1 km o-f -the 
message is, {{ Yourc oy\ -fiv e 广 



^ rt out ； hc\rc ； s ou\r vcsult^ 
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making your html location aware 


♦ 




命 




O 办轚 






Below you’ll see a few options for the geolocation API. 
For each option, match it to its behavior. 



I want only cached positions less than 
10 minutes old. If there aren’t any 
cached positions less than 10 minutes 
old, I ask for a new position, but only 
if I can get one in 1 second or less. 


I’ll use a cached position if the 
browser has one that’s less than 10 


minutes old, otherwise, I want a 


fresh position. 


{timeout : 0 , maximumAge:Infinity} 


{timeout : Infinity, maximumAge : 0} 



I want only fresh positions. The 
browser can take as long it wants to 
get me one. 


I want only cached positions. I’ll take 
one of any age. If there is no cached 
position at all, then I call the error 
handler. No new positions for me! I’m 
for offline use. 
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exercise solutions 



HTML5cross Solution 



212 Chapter 5 













































































6 tcdk!ng i9 th^ Web 


+ Extroverted Apps 


餐 



If only rd known 
reaching out and touching a web 
service could be so much fun... 


You’ve been sitting in your page for too long, it s time 

to get out a little, to talk to web services, to gather data and to bring it all 
back so you can build better experiences mixing all that great data together. 
That's a big part of writing modern HTML5 applications, but to do that you’ve 
got to know howto talk to web services. In this chapter we're going to do 
just that, and incorporate some data from a real web service right in your 
page. And, after you've learned how to do that you'll be able to reach out 
and touch any web service you want. We’ll even fill you in on the hippest 
new lingo you should use when talking to web services. So, come on, 
you’re going to use some more APIs, the communications APIs. 


this is a new chapter 





the mighty gumball app 


Mighty frumball wants a 
Web app 

This just in: Mighty Gumball, Inc., an innovative 
company that builds and deploys real gumball 
machines, has contacted us for some help. If you’re 
not up on them, they’ve recently network-enabled 
their gumball machines to track sales in near real 
time. 

Now it almost goes without saying that Mighty 
Gumball are gumball experts, not software 
developers, and so they’d like our help building an 
app to help them monitor gumball sales. 

Here’s what they sent over: 


Check out the 
new Web-enabled MG2200 
gumball machine. Ifs going to 
revolutionize the biz. 


<；： vcmcmbcv- 
七 hem -fvom ouV* book 

Head Bvs 七 

Pa*t*tcv-r>s, v/hc 灼 v/c 
helped dcsi^ 
•theiv* scv-vcv--s*idc toAt- 


舞 




0T 


CEO, 


IVlighty 1 加 . 

Where the Gumball Machine 
is Never Half Empty 


v/cll OVCV some spe^s U sc^.tc so_ 


M 吵七 Y ^3 mCC，rS 




V 


Mobile av>d dcsk*to? 
dcvidcs sales W 
a \rcal-*b^c sewev 
七 Wo— a scv-v'itc. 


<T 


Y/ayvb you *to 
*tWis 七 
— WTMl^ 


OuV- scv-vc\r ov\ 

七 V^C lAfelo 


^|| ouv gumball 
ma^rncs 代 ? ort ， •，山 
UYybrd\ scvvc\r. 


touv-sc ： 
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talking to the web 



BcW V/C jet stairtcd, take a little time bo 七 Uk thvoujh how you might desiy a” app 
七 ha 七 Sieves da-ta (>ro^ a web sewide a^d 七 ha keeps a web pay updated based ok> 

七 he data. Vov\ i v/ovry 七 ha 七 you dem’ 七 kr>o>w how -to \rctvicvc ihc data ye 七 , jus 七七 hmk 
•tlivougli ilic iiijh level design. Dv-aw a pid, label ii, Y/v-iic out pscudo-dodc -Pov- ar>y dodc 
you 你吵七 TVmk d "this as a wairm-up, just {o get youir bva'm Jomg... 


I 

Engineering Notes 

购脚 Gumbdl ， Itic. 

Where the Gumball Machine 
is Never Half Empty 

Hoy/ do V/C -tv^c data 

Jfvom v/ck SCVV.6C to 

ouv v/cb ㈣ C? 



weV got the data, 

how do we update the page? 



Wa 七 kmds ?voWc^ s 

—Wt ^ have， 

data Wa 

vemo-tc SCVVCV? 


5?n?a 
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overview of mighty gumball 


A little more background on Mighty Gumball 

You probably need a little background beyond Mighty Gumball’s short note. Here’s what we’ve 
got: first, they’ve got gumball machines all over the country sending sales reports to a Mighty 
Gumball server, which combines all those reports and makes them available through a web 
service. And, second, they’re asking us to build a web app that displays the sales in a browser for 
the Gumball Sales team. And, most likely they want this report to be updated as the sales change 
over time. Here’s the view from 10,000 feet: 







Thanks everyone, I'm taking 
all the sales and combining 
them all together. 


A Mighty 
deploye 


Gumball machines are 


deployed throughout the country 
ana sending sales information to 
the central Gumball servers. The 
server aggregates them together 
and makes them available 
through a web service. 



Gumball Server 
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talking to the web 


The browser loads the 
Mighty Gumball web app, 
including the HTML markup, 
CSS and JavaScript. 



/S 


ie 



The app makes a Web reque 
^ retrieve the aggregated sal 
from the Gumball se 


st to 
es 


server. 





The app receives data back from 
the Sumball server. 


❼ 


The app goes back 
to step 3, and 
continually asks for 
new data. As a result, 
the page appears to 
be updated in near 
real time. 




❺ The browser updates the 


ie based on the DOM 
your users see the 
results. 


pag/ 

ana 


you are here ► 


217 















































































preparing the markup 


Just a quick start... 

While we’re waiting on those specs from Mighty Gumball, let’s get some HTML going. 

You’re probably getting the idea we don’t need a lot of HTML markup to get a web app 
off the ground, and you’re right. All we need is a place to put our sales reports as they 
come in, and we’ll let JavaScript do the rest. Go ahead and get this typed in, and then 
we’ll take a look at how to retrieve things via the Web. 


Jus*t youv- s*tar\davd 

<!doctype html> ^ tt 丁扣 d body. 

<html lang= M en M > 

<head> 


<title>Mighty Gumball (JSON)</title> 


<meta charset= n utf-8 n > 

<script src= n mightygumball. js"X/script> 

<link rel= n stylesheet” href= n mightygumball.css n > 



Wic’ve diicddi Imkcd *to 3 v)£ ^ilc 
kr\oy/'m5 y/C II be some JavaS^ipt soov\. 


</head> 

<body> 

<hl>Mighty Gumball Sales</hl> 
<div id= n sales ▼▼> 




h^A v/c set Up ouv CSS -to style 
the /Wigh-ty gumball sales v-epov-t 
so it looks good -fo\r the CB-0- 


</div> 

</body> 

</html> 



Hcvc^s a platciioldcv- (or v/iicvc v/cVc 
*to ^u*b sdlcs dd'bd* A sale 
i'tcw' be 3ddcd 3 s d <div> ^CV*C* 


turn the engine over … 琢 

Go ahead and type in the code above, load it into your favorite 
browser and give it a try it before proceeding. And remember, 
you can download the CSS (and the other code for this chapter) 
from http : // wickedlysmart. com/hfhtml5 . 
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talking to the web 


So how do we make requests to web services? 

Let’s step back for a sec... you already know how a browser requests a page from 
a web server — it makes an HTTP request to the server, which returns the page 
along with other metadata that (typically) only the browser sees. What you might 
not know is that the browser can also retrieve data with HTTP from a web server 
in the same way. Here’s how that works: 


Hcvcs a server 

Wov^scvs. 



aggregated gun\b Q// 


㉟ 5 S 5 , 



々 Vxe J 

^>pj 







/ ' 


Web Server 


'Sure here you go* 

The scv-vcv- v-c*tuv-\r\s i*b da*ta* 


It helps to look a little more closely at the request we make to the server and the 
response that comes back. The request takes care of telling the server what data we’re 
after (which we sometimes refer to as the “resource” we’re after), while the response 
contains metadata and, if all goes well, the data we requested: 


THE REQUEST ： uses HTTPM ^ob>to\ 

bo jrt ttc vcsouvdc at w /jumballsales^ 
(ouv application oy\ ttc sewev). 



TV>c wc-tada-ta ： v/cVc 

mak'rn^ -tV>c 

{p -tKc Kos-t ^uwball- 

yii6kedl'/ sw ' ay ■ 七 '… 


...and tKc vc^ucst is 
-fvom a /Wozilla ^ O 
Compatible bvov/sev (Sa-favi 
CKvomC airtd o-tKcvs use 
■this uscv-a^c^-t). 


THE RESPONSE ： ilic ttTTPl.l pvo-todol licadcv- is 
-f ivs-tj it’s jus 七 sdy'm^ tlVis vcspo^sc makes use 
HTTP pvo-todol a^d also pvovidcs a vcspo^sc todt- 


ZOO is 七 lie scv-vcv 
dode -tiiat r»»car\s 
\weh 七一 



TKc metadata ： 

*7*5 厶 bytes 

七 Y\>c jsor\ - 


...ar\d Kcv-cs 七 V>a 七 da*ba! 



HTTP/1.1 200 OK 

Content-length 756 
Content-type: application/j sor 

[{"name" : "CAMPBELL", 

"time ”： 1302212903099, 

’’sales，，•• "3，，}, 

{ ” name” •• ，， FRESNO ，，， 

"time ”： 1302212903100, 
"sales" : 2}, 



Ko*tc : This pa*t*tc\r^ of \rc*tv"icv*mg dd*td usm^ )<MLtt*t*tpRc<\uCS*t is dommo^ly \rc-fcv-\rcd *to as w /\ja 乂 ” or 刈 R. 
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using xmlhttprequest 


How to make a request from JavaScript 


Okay, so we know we can retrieve data with HTTP, but how? We’re going to write 
a little code to create an actual HTTP request and then ask the browser to make 
the request on our behalf. After it’s made the request, the browser will then hand 
us back the data it receives. Let’s step through making an HTTP request: 



To kick things off, well start with a URL After all, we need to tell 
the browser where to get the data we’re after: 


ouv- URL somcscv-vcv-.dorw. 




TKc w .jsoyv w s'»y»-f 'ics a 
-fov- 

da*b3) v/c II tome katk -to 
七 Wis ‘m d bvt 


var url = "http://someserver.com/data.json" 

T 

le*t’s s*tash the URL m 3 variable, 

u\rl> v/hidh will use m a set- 



Next we’ll create a request object, like this: 


var request = new XMLHttpRequest(); 

, 个 ^ 

M 代 assijhihg -the use the )<MLffbtpRe 气 uest do^s-tv-ud-fcov- 

^•c^ucs-t object -to a v-c<\ucs-t object Well talk 

"the v^v-iablc v-c<^ucst. about "the pav-t o( m a brt 



1 

kv-a^d y^cv/ 

okjett 



Next we need to tell the request object which URL we want it to 
retrieve along with the kind of request it should use (we’ll use the 
standard HTTP GET request like we saw on the previous page). To do 
this, we’ll use the request object’s open method. Now "open" sounds 
like a method that not only sets these values in the request object, 
but also opens the connection and retrieves the data. It doesn't. 
Despite the name, open just sets up the request with a URL and tells 
the request object the kind of request to use so that XMLHttpRequest 
can verify the connection. Here's how we call the open method: 

request.open("GET" A url); 


This seis up a v-c^ucst 
+ 饮吟 usihg ah HTTP 
与£丁 ^rc^ucs-t ; is 

"the s^hddvd 

代 HTTP daia. 


also sets u\> 

vc°\ucs*t b> ^ WRL 

s*bov*cd …。价 uV "l vav-iaklc- 



TKc updated 

object 

knov/s Were rt’s 
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Okay here’s the important part, and the trick of how XMLHttpRequest works: when 
we finally ask our XMLHttpRequest object to retrieve data, it’s going to go off 
on its own and get the data. It might take a 90 milliseconds (quite a while in 
compute time), or, on a slow day, it might take ten seconds (an eternity in 
compute time). So rather than just waiting around for the data, we're going 
to provide a handler that is called when the data arrives. Here's how you set 
up the handler (this should look somewhat familiar): 


Ouv \rc«\ucs*t object 

request.onload = function() { 
if (request.status == 200) 
alert("Data received! n ) 


/■ 


W\\cy\ b\rov/sc\r jrts 
-from 

v/cb scv-vi^c, it 
匕 alls *this 


XMLHttpRequest 

method ： GET 

URL: ''http：//... 1 
onload ： 


The ha 灼 dlc\r 灼 ceds *to i-f 七 he v-rtu\r^ todt is 2-00, o\r 

By\A 灼 i*t CBy\ do data. Fo\r ^ov/ y/cll jus 七 alcv-t *t^C 

usev- is hc\rc. Well -rill m with move med 灼 Code sooy\- 


request.onload = function() { 

if (request.status == 200) { 
alert("Data received!"); 


Just one last step: we still need to tell the request to go out and get the data, and 

to do that we use the send method: 

fef^ This str\ds *bKc \rc<\ucs*b *to -the scv-vcv-. Wic pass ywa\\ i-f v/cVc y\o{, 
request. send (null) ; a , y da ta io the ,ot). 

So, to review: we create an XMLHttpRequest object, load it with a URL and HTTP 
request type, along with a handler. Then we send the request and wait for 
the data to arrive. When it does, the handler is called. 



Web Service 
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how to access an http response 



We just hadn’t quite got there yet. The data from 
the HTTP GET retrieval can be found in the 
responseText property of the request object. So 
we can write code like this: 

/ - - TKis -fur>dtior\ is dallcd 

v-c<\ucs*t Kas 

request. onload = function () { vcdcivcd B \rcspoiasc. 


if (request.status == 200) { 

alert(request.responseText); 


Wc dah get "the \TCSpohSC -pv-om 
the \rcspohsc7cxt pv-opev-ty o( 
tk \rc<\ucs-t obj 比 4 


But hang on, we’re just about to the point of writing 
some real code that uses request. responseText. 
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Code Magnets 

A new web service at http://wickedlysmart.com/ifeelluckytoday returns either "unlucky” or "lucky” each 
I time you hit it. The logic is based on a secret and ancient algorithm we can't reveal, but it's a great 
_I service to let users know if they are lucky or not on a given day. 

We need your help to create a reference implementation to show others how they might include it in 
their site. You'll find the skeleton code below; help us fill in the details using the magnets. Be careful, 
you may not need all the magnets. We’ve already done one for you. 


window.onload = function () { 

var url = "http : //wickedlysmart.com/ifeelluckytoday' 
var request = _ 


if 


displayLuck( 


Feel lucky today? 
Wanna be sure? 
Use the service! 


Youv- iicv-cj 


o 



function displayLuck(luck) 
var p = document._ 

P- 



Today you are 


luck") 
■ luck; 


1 

new TextHttpRequest ()； 


request.create ("GET", url); 

var 

i = 0; 


request•responseText 





request.send(null); 

| request.open("GET", url); j 


request. onload = funct-.i nn () 

k 



I 

VMT.H-M-nPormost M : 

myLuckyText 

11^ W W 一 -a 一，寶 ， 




getElementByld 
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exercise solution 



Code Magnets Solution 


A new web service at http://wickedlysmart.com/ifeelluckytoday returns either "unlucky” or "lucky” each 
time you hit it. The logic is based on a secret and ancient algorithm we can't reveal, but it's a great 
service to let users know if they are lucky or not on a given day. 

We need your help to create a reference implementation to show others how they might include it in 
their site. You'll find the code skeleton below; help us fill in the details using the magnets. Be careful, 
you may not need all the magnets. Here's our solution. 

window.onload = function () { 

var url = "http : //wickedlysmart.com/ifeelluckytoday"; 


Feel lucky today? 
Wanna be sure? 
Use the service! 






o 

I 

ft 









: a 




4 








var request = 

new XMLHttpRequest(); 1 

request. 

onload = function () IT{ 

if (. 

request.status == 200 1) { 

displayLuck( 

request.responseText | 


request.open( "GET", 
request.send(null); 



Youv- 50 Kcvc! 


function displayLuck(luck) { 
var p = document. 

P. 




Today you are 


/■ 


Lc-f*toVCV- 


var 


myLuckyText 


new 


request.create("GET", url) 

TextHttpRequest ()； 
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talking to the web 


This week’s interview: 

Confessions of an HTTP Request Object 

Head First ： Welcome XMLHttpRequest, we’re glad you could fit us into your busy schedule. Tell us about how you 
fit into building web apps. 

XMLHttpRequest ： I started this whole trend for bringing outside data into your web page. Heard of Google 
Maps? GMail? That was all me. In fact, it wouldn’t have been possible without me. 

Head First: How so? 

XMLHttpRequest ： Until I arrived, people were building a web page on the server side and baking everything into 
the page as they created it. I allow you to go out and get data after the page is built. Think about Google Maps: it 
updates what’s on the page every time you adjust your location on the map, without having to reload the whole page. 

Head First: So, you’ve been a successful guy. What’s your secret? 



XMLHttpRequest: I’m humble, oh, and simple. Give me a URL and I’ll go get the data for you. Not much more 
to me than that. 

Head First ： That’s all there is to it? 

XMLHttpRequest: Well, you do have to tell me what to do with the data after I’ve retrieved it. You can just give 
me a handler function — a callback of sorts — and when I get the data, I’ll throw it at your handler to do whatever it 
wants with the data. 

Head First ： What kinds of data are we talking about here? 

XMLHttpRequest ： The Web is full of data these days; weather, maps, social data about people and friends, 
geolocation data about what’s nearby... really, just about any data set you can think of is making its way onto the 
Web in a form that works with me. 

Head First ： And this is all XML data, right? I mean your first name is XML. 

XMLHttpRequest ： Really? You’re a professional and that’s where you wanna take this interview? You did your 
homework and all you can say is “you’re all about XML, right?” Let me set you straight. Sure, there was a time I 
mostly retrieved XML, but the world is moving on. Nowadays, I retrieve all kinds of data. Sure, some XML, but 
more and more I’m getting requests for JSON. 

Head First ： Really? What’s JSON and why is it getting so popular? 


XMLHttpRequest ： JSON is JavaScript Object Notation and it has a number of advantages — size, readability, the 
fact that it is native to the most popular programming language on the Web: my friend JavaScript, of course. 


Head First ： But isn’t it the case that the format really shouldn’t matter to you? Users should be able to request 
XML or JSON or teletype for all you care. No? 

XMLHttpRequest: <silence> 

Head First ： Well, it seems I’ve hit on a sore spot. That’s okay, we’ve got to go to break... So, XMLHttpRequest, I 
think we’ve got more time with you later in this chapter? 

XMLHttpRequest ： Yes, unfortunately I see that in my schedule... 
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introducing json 


Move over XML, meet JSON 


You might (or might not) remember that XML was going to save us all — a data 
format that was human readable and machine parseable, a data format that was 
going to support all the data needs of the world. And when XMLHttpRequest 
was first developed, XML was indeed the way we all exchanged data (thus, the 
name XMLHttpRequest). 

Well, along the way XML apparently slipped on a banana peel thrown by JSON. 
Who ? s JSON? Just the latest and greatest data format, born out of JavaScript, and 
being adopted across the Web in the browser and on the server side. And might 
we add, it’s quickly become the format of choice for HTML5 apps? 

So, what’s so great about JSON? Well, it’s pretty darn human-readable, and it can 
be parsed quickly and easily straight into JavaScript values and objects. Unlike 
XML, it’s so cute and cuddly... anyway, can you tell we like it just a little? You’ll 
be seeing a lot of JSON in this book. We’re going to use it to exchange JavaScript 
data over the network, to store data in a local store with the Web Storage API, 
and as part of another way to access web data (more on that shortly). 

But wait a sec, network data exchange formats... storage formats... that’s complex 
stuff, right? No worries, over the next ten pages we’re going to make you an expert 
you already know practically everything about JSON you need to. To use JSON 
you just need to understand JavaScript objects (which you do, big time) and two 
simple method calls. Here’s how it all works: 


o We have a JavaScript object we want 
to exchange or store, so we call the 
JSON.stringify method, passing the 
object as the argument. 


❷ The result is a string that 
represents the object. We 
can store this string, pass it 
to a function, send it over the 
network, etc. 



JSON.stringify( moVie ) 



{"title" : 11 Plan 9 from Outer 
Space” ， ’’genre’ 1 : 11 Cult Classic 
,’’rating 1 ’ ： 5, f, show times 1 * : [ M 3 : 0 
Opm n ，’ ’7 : OOpm 11 , M 11: 00pm n ] } 


String 


JSON Ohi 狀 . 



JSON.pars 


e(jsonString) 


❹ The result is a copy of 
our original object. 


❺ When we're ready to turn the string 
back into an object, we pass it to the 
JSON.parse method. 
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talking to the web 


A quick example using JSON 


① 


Let’s run through a quick example that converts an object into its JSON 
string format. We’ll start with an object you already understand, the Movie 
object from Chapter 4. Not everything can be converted into a JSON 



string — for instance, methods — but all the basic types, like numbers, strings, 
and arrays, are supported. Let’s create an object and then stringify it: 


TKc^rc arc attually a 
O 七 V-CS-tv-'lttlOhS, lout 
y/e 七 v/ov*vY about 

{\\ost 妁 o>w. 


var plan9Movie = new Movie("Plan 9 from Outer Space","Cult Classic ”， 2, 

["3:00pm", "7 : 00pm n , M 11 : 00pm M ]); 


ttcvVs a 灼 ide movie object Complete 
wi*th s*bri 呼，灼 umbc\rs By\ a\rvay- 



② 


Once you’ve got an object, you can convert it into the JSON string 
format with the JSON. stringify method. Let’s see how this works... 
(feel free to try this by opening your Chapter 4 movie code back up and 
adding the following code to the bottom of your script): 


^3 


rtitlfPlan 9 from Outer SpaceVg 

Classic",'rating'iS/showtimes*: 
f3 ： 00pm V7 ： 00pfn\*l l:OOpm M |) 


IVI I I 




C~OK~) 


var jsonString = JSON.stringify(plan9Movie); 
alert(jsonString); 


Wtrts -tV^C result, a strmft ^ 
vcv*s»oy\ object 

displayed m ^ alert. 


③ 


Now we’ve got a JSON string that represents our movie object. At this 
point we could take this string and do any number of things with it, like 
send it over HTTP to a server. We can also receive a JSON string from 
another server. Let’s say a server gave us this string; how would we turn 
it back into an object we can do something with? Just use 
JSON . stringify’s sister method: JSON • parse. Like this: 

var jsonMovieObject = JSON. parse (jsonString) ; 卿 we use this as a veal 

alert ("JSON Movie is " + jsonMovieObject. title) ; i*ts p\ropc\rtics. 




Try this URL What do you see? 

http : / /search, twitter. com/search. json?q=hfhtml5 

Note: Fi\rc-fo>c will dsk you *to o^cy\ ov save a -file- Y® u 乙扣 o^tv\ 
wi 七 h TextEdit Notepad, o\r 叫 bdsid cdi*to\r. 


























reviewing the mightygumball specifications 


丁 k _ avrW 彳 


Make sure 

Vou do -bWisf 


㉞ 今 ， ball Sc\rvc\r S\>ets 


IViiglity 細 M ， Ine. 

Where the Gumball Machine 
is Never Half Empty 


TV^a^ks -fov -bak'm^ *bW»s oJJJ. 

WtMt ^oi all sales 仏 e gumball madWcs a^vc^atcd 

a 灼 d bem^ sewed -fvom ouv ^tv-al sewev- at 
http •• / /gumball. wickedlysmart. com/ 

^vc JSON as ou^ data Wat a^d ^ you U above URU you II 
ba.k a, a-ay JSON 。— ts M Uk L ^ 以恤此 〆 代 〆 

[{"name" : ” CAMPBELL' 4 ^— • 一 . 

” sales” •• 3} , K T ^ c t，mC m 

X Y/V^ -tWis vepov-t car^t rn. 

{ ：^：； ~' 9 03100, ^ 

"sales ”： 2 }, ^ A se “ ，酿 W. 

f[Y\d move 6tics Will be hen. 

aV.ead a^d tW.s URL m*to you^r to see va^s 

badk. Vo ； should see o,e o, these objedts m a, a^y* ^ ^ ^ ^ 

You also add a 1 士呼喊 P av-ameie»-1> tKe e^d i^e URL 』 邮伽 ds. 

a^d you II yb o^ly tlic vewb smde 如七 Wc. Wse rt like 七 

http •• //gur^all.wiclcedlysmart. com/ ? lastreporttime=1302212903099 


^vc act hu^dv-cds ^mball mad^mes rcfortmV», r 

scc 一。士 about every *5-0 se^ds a 败 ay. That sa.d, this 

servev* so *bcs*t youv toAt lodally ^ ,v，s t 

TV^ks a^a'm -fov youv help" 
cmf*by/ ; as ouv Cc -0 says. 


m -fad-t 

is ouv 


you shoul 
^vodudti 

tally -f iv-s-t! 

/W vemembev U *t^C gumball madhmc is ^vcv hal-f 


一 Mi^ty gumball E^^*mccv-s 
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talking to the web 


Lef s get to work! 


We’ve got our specs from Mighty Gumball and you’ve done your 
training on XMLHttpRequest andJSON. You should be all ready 
to get some code written and to get a first cut of the Gumball App 
running. 



Now ，remember we’ve already laid out some HTML to work from, 
which links to a file called mightygumball. j s. That’s what we’re 
going to start writing our code now. Remember too that we’ve 
already left a spot in the HTML where we’re going to put the 
gumball sales data, right into the <div> we labeled with an id of 
“sales.” So let’s put everything together and write some code. 

Writing aw onload handler function 

We’re sure this is old hat for you now, but we’re going to write an 
onload handler that gets invoked when the HTML is fully loaded; 
we’re also going to go ahead and fire off an HTTP request to get the 
sales data. When the data comes back we’ll ask the XMLHttpRequest 
to call the function updateSales (which we’ll write in just a sec): 


window.onload = function() { 

var url = "http : //localhost/sales.j son' 
var request = new XMLHttpRequest(); 
request.open("GET", url); 
request.onload = function() { 

if (request.status ==200) { 





updateSales(request.responseText); 


request.send(null); 


Pmally, wc the v-c<\ucst 


VVcVc -to itsi on d \ota\ 

^,| c (l.kc 

今 u 眯 kail c^mccrs su^cstcd!) 

•to make sure cvc^Y^'m^s 

y/oV*knr\^ - Wic II move 
akou*t *tW»s m ov\t set... 

Wlc set up the )<MLtt*ttpRc<\ucs-t by dv-cat'mj the 
object, -the open method wi*th ouv URL and 

*th ⑶ onload property *to a 灼 . 

lAfe cMtck bo make sure 
is 七 


… v/hc 的 -the ddid has domplctcd 

loddm^ 七 his is ddlled. 




If you're using Opera or IE 8 or older, we recommend 
you test with another browser. We'll talk about how 
to support Opera and older IE browsers later. 


you are here ► 


229 







how to test locally 


displaying the gumball sales data 


Now we need to write the handler, updateSales. Let’s make this easy 
and just go with the simplest implementation possible, we can always 
make it better later: 



function updateSales(responseText) { 

var salesDiv = document.getElementByld( n sales n ); 
salesDiv.innerHTML = responseText; 


Will yab <dw> already put m 
~a/ij i4 - as ^ pla^c -rov 七 he data. 


HTML ad use it as a flatc 




se 七 the div/s 乙咖七⑶七 
*bo 七 he whole t\\\Ark of 
Well deal wi 七 h pav-smg i*t m d 
mmu 七 e … Lets -tes-t 七 his -Pivst 


Watch Out Petour Ahead! 



It’s time for another test drive, but we have a little detour to take care of first. The 
Mighty Gumball engineers asked us to test locally before hitting their production 
server, which is a good idea. But to do that we need the data to live on a server so 
that XMLHttpRequest can use the HTTP protocol to retrieve it. 

In terms of servers you’ve got a few choices: 

■ If your company has servers that are available for 
testing, use those. 

■ Or, you can use a third-party hosting service like GoDaddy, 

Dreamhost or one of many other hosting companies. 

■ Finally, you can set up a server right on your own machine. In 
that case your URLs are going to look something like: 


http :// localhost/mightygumbal1•html 


A 


The -Piles also be flawed m a subdiv-cd-tov-y, like 
ivbtp:/ /\otd\\\os{/ jumbal 1 /mi 少 tygumball.lvtml 

Check out the next page for tips and pointers. Keep in mind, hosting 
environments differ a fair bit, so we can’t write a general guide to these. So, may 
the force be with you, and if you don’t have easy access to a server already, setting 
up a server on your local machine may be your best choice! 
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talking to the web 

How to set up your own Web Server 

How you set up your local hosting really depends on what kind of operating 
system you’re using. Check out the tips below for OS X (otherwise known 
as the Mac), the PC and Linux. You’ll find other options on the next page. 



I’m a Mac 

Setting up a web server on the Mac is easy. 
Go to > System Preferences, and then 
choose Sharing. In the panel on the left, 
make sure Web Sharing is checked: 


Web Sharing 


Once you’ve turned Web Sharing on (or 
if you already have it on), you’ll see some 
information about how to access your local 
server. You should be able to use localhost 
instead of the IP address (which tends to 
change if you’re using a DHCP router, 
so localhost will work better for you). By 
default, your files are served from http : // 
localhost/ 〜 YOUR—USERNAME /， which 
serves files from your YOUR_USERNAME/ 
Sites/ folder, so you’ll probably want to set 
up a subfolder there for Mighty Gumball. 




Installing your own web server on Windows is 
easier than it used to be thanks to the Microsoft 
Web Platform Installer (also known as Web PI). 

The current version is available for Windows 7 ， 
Windows Vista SP2, Windows XP SP3+, Windows 
Server 2003 SP2+, Windows Server 2008, and 
Windows Server 2008 R2, and you can download 
it from here: http : // www. microsof t. com/web/ 
downloads/platform.aspx. 

Another option is to install the open source 
WampServer, which comes with Apache, PHP and 
MySQL for web application development. It’s easy 
to install and manage. 

You can download WampServer from: 

http :// www.wampserver.com/en/. 

There are a few other open source solutions out 
there if you look, so you’ve got lots of options. 


I'ma 4etat^«ek-UMUX PistributioM 

Let’s face it, you already know what you’re doing. Right? Apache is usually installed by default, 
so check your distribution documentation. 


you are here ► 
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setting up your own server 


How to set up your own Web Server, continued 

Ah, you want to really host your pages? Excellent, there’s no substitute for having your 
pages hosted on the real Web. Check out the tips below and have fun! 



彡 rd Party Hosting... 


If you don’t want to set up your own server, you can always use a remote server, 
but you’ll need to host your HTML, JavaScript and CSS, as well as the JSON file, 
all on the same server (we’ll talk later about why this is crucial) in order to follow 
along with this example. 

Most hosting services will give you FTP access to a folder where you can put all 
these files. If you have access to a server like this, upload all the files and substitute 
your server name wherever you see localhost in the following pages. 


fT^THead-First-HTML5 

IZZ1 

Name 

"V .DS-Store 


[] chapter3 


chapter6 




;—j chapterl 


chapter7 


chapter9 


^ chapter8 


__j chapters 


〕 chapter4 


j chapter2 


README.txt 


Q global 

- \ 

◄ ► 

% — . . . 

Status: Idle 

your Stuff. (13 items) 


f (~p hfhtml5 


Name 

Qj chapter 1 
chapter2 
chapter3 
chapter4 
「| chapters 
j_j chapters 
； chapter7 
chapter8 
〕 chapter9 
j chapterlO 




their stuff. (10 items) 

二=霸 


Y<>U ddK) use dY\ 

FTP p\roj\rarw 
like TVa^si-t, 
Cybcvdudk oy 

l^ii^SCP "to 
ge 七 you\r -piles 
uploaded i-f you 
dor / 七 "fco 

use Ime 

FTP. 


A 


We’ve put together a list of hosting providers in case you need a recommendation, 
but they’re easy to find; just search for “web hosting” and you’ll find lots to 
choose from. Our list is at http : // wickedlysmart. com/hfhtml5/hosting/ 
hosting. html. And let us know if you get an HTML5 web site up online; we’d 
love to see it! 
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Pack to the code 


At this point we’re expecting you’ve got your own server up and running — that 
could be a server running on your local machine (what we’re doing) or a server 
somewhere else you have access to. In either case you’re going to place your HTML 
and JavaScript files on the server and then point your browser to the HTML file. 
You’re also going to need the Mighty Gumball sales data test file there too, so we’re 
going to give you a simple data file to place on your server. To your application it 
will look just like it’s being generated from Mighty Gumball’s near-real-time server, 
and it gives you a way to test your code without hitting the Mighty Gumball server. 
Here’s what the file looks like; it’s named sales . j son and it’s included with the 
code for the book (or you can type it in if you enjoy that kind of thing): 


[{，▼ name' 
{"name 1 
{"name 1 
{"name 1 
{"name 1 
{"name 1 
{"name 1 
{"name 1 
{"name 1 


'ARTESIA", n time n : 1308774240669,"sales":8}, 

▼LOS ANGELES","time":1308774240669,"sales":2}, 
'PASADENA" , n time M : 1308774240669 , "sales":8} , 
▼STOCKTON” ， "time":1308774240669,"sales":2} , 
'FRESNO","time" : 1308774240669,"sales":2}, 
▼SPRING VALLEY","time" : 1308774240669,"sales" : 9} 
'ELVERTA","time":1308774240669,"sales":5}, 
▼SACRAMENTO” ， "time， ▼: 1308774240669 , "sales":7} , 
▼SAN MATEO","time":1308774240669,"sales":1}] 


^/cVc *to use salcsAsoh 

〆 — ^ -fov kc*fovc 

vedl pvodu£.*t»oir\ sevvev 
v-cal-tiw'C sales 


Go ahead and put this file on your server and then make sure you 

update your JavaScript to the URL for this file. Ours is ’ 

http : // localhost/gumball/sales . j son: | 七 "bo 

URL m kv-oy/sev- -to 


window.onload = function() { 


r^dke SUV-C it >WOV-KS- 




var url = "http : //localhost/gumball/sales.j son"; 
var request = new XMLHttpRequest(); 
request • open (，▼ GET, url); 
request.onload = function() { 

if (request.status == 200) { 

updateSales(request.responseText); 


A O O 


C 


8ale«" ： 8> # 


【 {"name" artesia" 

{"nain ©-： «los 

{ name" 

{"name". 

{"name N ："spring 一 r -， 

{*nam6-.- SACRAM £ N ； o .^.^3CI8774240669,- 8 aie 8 - !5K 
»{"nameSAN , • 1308774240669,'sales" *7> 

職 OW ”： ⑶ 87742 m 69 ,X: in 


r ，’ ， i _ _ 


Make su\rc this is pomtmg 
"to the \riglvt URL. 


request.send(null); 


you are here ► 
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testing mighty gumball version one 


Lcfs test this already ! 琢 

It’s been a long road but we’re finally ready to test 
this code! 

Just make sure you’ve got the HTML, JavaScript, 
JSON 一 and don’t forget your CSS — files on the 
server. Go ahead and enter the URL of your HTML 
file into your browser (ours is http : //localhost/ 
gumball/mightygumball. html), press return... 




Miyhly Gumbdll 


HZKQ3g)(H] L"*" ^^ttp7/lofAlho<;r/g,jmhal)/miqhrvQiimhall hfm f 

Mighty Gumball Sales 


Cnnglp 


AM n r a p. e «c^ TO5IA " ，，， time '•' 皿 774240 贼 ” sa i es " :8 >，{ -name-：-ms 
ANGELES , time": 1308774240669,"sales B :2> 

{ , 'name ,, :"PASADENA",-time'':1308774240669/sales":8> 

{"namc":"STCX ： KTON"/timc":1308774240669 1 "salcs":2} 

’ 二，⑽'”—'麵 74240 帆 " salcs U 

VALLEY . lime\1308774240669. ,, sales":9>. 

{"name":"ELVHKTA308774240669 "sales*-5> 

MA^n ： ^ AC ^ OTOVUme，，：1308 ^ 

MATEO ， ” Umc”:1308774240669,salcs ,, :l}J 


No 七 pvctty, bu*t ddid is *thc\rc- 


wcVc By\ HTTP v-c<^ucst *to yt 
■the m salcsjso^ ^\\\cM wcVc jus-t dump'mj 
•m*to <div> (or y\o^i- Looks like i*t wo\rkcd ： 



l-f youVc having trouble, dKcdk eddK 
-file mdependen 七 ly 七 hvoujii you\r 
bvoy/sev and make suve it is addessible- 
Tlicn doublc-^Kcdk youv URLs. 



Nice! That took a 
lot of work. We had to understand 
how to do HTTP requests and also 
set up the server, but it works! I*m 
already thinking of all the great 
apps I can build to make use of all the 
web services out there, now that I 
know how to talk to them. 
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talking to the web 


Impressing the client... 

We’ve done a lot of heavy lifting to get this app working, and that’s great, 
but Mighty Gumball is going to be a lot more impressed if it looks good too. 
Here’s what we’re going for... 


What we have 


What we want 




Mighty Cumball 


I p - J [Q] [•! [ ■■ I [ 4*hup //lof^mo<iT/gLjmhAll/mighrvgijmrMll hirr c] (Q ， 


Mighty Gumball Sales 


^ ^ Mighty Cumball 

_ Ij^l] 1 O I ^ I j ■■ I [ + M 0 hnp7/loralho^T/gumhall/mighrygummil.him C Cnngle 


Mighty Gumball Sales 


H”name":”ARTESIA*V’time":1308774240669 ， ”sales”:8},rname':”LOS 
ANGELES"."time": 1308774240669."salcs , :2>. 
{ ,, name B :TASADENA*,*lime":1308774240669/sales , :8>, 

{"name":"STOCKTON , , "time”: 1308774240669,'sales":2>, 

{"namc":"FRESNO*."timc":1308774240669. e salcs":2}.{ , 'namc*:"SPRING 

VALLEYVtime , :1308774240669, , sales H :9}, 

{”name":”ELVERTA*/time”:1308774240669 ， "sales”:5}, 

rnamc":*SACRAMliNrO_,"timc":1308774240669/salcs":7}.rnamc lf :-SAN 

MATFO*,"time" ： n08774240669, , sa1es":1}] 


ARTESIA sold 8 gumballs 
LOS ANGELES sold 2 gumballs 
PASADENA sold 8 gumballs 
STOCKTON sold 2 gumballs 
FRESNO sold 2 gumballs 
SPRING VALLEY sold 9 gumboils 
ELVERTA sold 5 gumballs 
SACRAMENTO sold 7 gumballs 
SAN MATEO sold 1 gumboils 




/\*t moment V/cVc jus*t a 

JSOK av-v-ay v-ijh-b m*to the bv-owsev-. 
Somcv/hat but ujly. what 

a waste, thcv-c is a whole da*ba s*t\rud*tu\rc 
jus*t waitmg *to be used c-f-fc^*tivdy| 


Wtrt weV used the JSOK av-v-ay a^d 
dv-ca*tcd a display -f\rom it I Vs that last 
10 % *bha*b tBv\ make -the between 

ama*beuv pv-o-fcssio^al, don’t ya tlVmk? 


Here’s what we need to do to improve our display: 

① First we need to take the data we got back from our 
XMLHttpRequest object (which is just a J50N string) and 
convert it into a true JavaScript object. 

② Then we can walk through the resulting array and add new 
elements to the DOM, one per sales item in the array. 


you are here ► 


235 
























adding json support 


Reworking our code to make use of JSON 

Let’s follow those two steps and get this code in shape: 


① First we need to take the data we got from the XMLttpRequest object 
(which is just a JSON string) and convert it into a true JavaScript object. 

To do that, lefs update the updateSales function by first deleting the line 
that sets the <div> content to the responseText string, and convert the 
responseText from a string to its equivalent JavaScript using json. parse. 


function updateSales(responseText) { 

var salesDiv = document.getElementByld("sales n ); 

salesDiv. innerHTML = responseText; 一 Wlc do 灼’七 七 his I me anymore- 


var sales = JSON.parse(responseText) 


Take 七 he a^d use io \i 

■山 a objed (ih -this tasc it Will be dh 

avv-ay), av\d assign it -to the va\riab!e sales. 


② Now lefs walk through the resulting array and add new elements to the 
DOM, one per sales item in the array. In this case we are going to create 
a new <div> for each item ： 


function updateSales(responseText) { 

var salesDiv = document.getElementByld( n sales n ); 
var sales = JSON.parse(responseText); 

for (var i = 0; i < sales. length; i++) Itcvatc tKvoujK cadK item in tKc avvay. 


var sale 


sales[i]; 


var div = document.createElement( n div M ); 
div.setAttribute("class", "saleltem'. 
div.innerHTML = sale.name + n sold n + sale.sales 


Fov eadK item dveate a <div>, and jive it 
七 lie “saleltem” dldss (used by CSS). 


salesDiv.appendChild(div); 




gumballs 


Sc 七七 he <div> ； s y/itK mhCvttTAIL, 

and tKcn add it as a tW\\d o( -tlic sales <div>. 
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talking to the web 


The Home Stretch 



You already know what this one is going to look like, but go ahead and 
make these changes. Take one more careful look at the code on the 
previous page and make sure you’ve got it all down. Then go ahead, 
reload that page. 

See, wc *told you it 
would look like this. 




« n m 


Eighty Gumbail Sales 

ARTESlAsoldSgumballs m 

LOS ANGELES sold 2 gumballs 

PASADENAsoldegumballs 

STOCKTON sold 2 gumballs 
FRESNO sold 2 gumballs 

SPRING VALLEY so/d 9 gumballs 

ELVErta sold 5 gumballs 

SACRAMENTO sold 7 gumbaHs 

SAN MATE0 sold 1 g_ a||s 



Moving to the Live Server 

Mighty Gumbail asked us to test locally, and we have. Now we’re 
ready to move on to testing against the real server. This time, rather 
than retrieving a static JSON data file, we’ll be retrievingJSON that is 
generated dynamically from the Mighty Gumbail servers. We do need 
to update the URL that XMLHttpRequest is using and change it to 
point to Mighty Gumbail. Let’s do that: 

fW’s thci\r sc\rvc\r URL. 

"this dhd rvtdke suve i"t ； s s^ved- 

window.onload = function() { 

var url = "http : //gumbail.wickedlysmart.com"; 
var request = new XMLHttpRequest(); 
request. open ("GET, url); 
request.onload = function() { 

if (request.status == 200) { 

updateSales(request.responseText); 

} 

}； 

request.send(null); 


Ajay, the Quality 

今 uy 


you are here ► 
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a problem with mighty gumball 


A Live Test Privc... 

Make sure your URL change is saved in your mightygumball. j s 
file on your server, if you want to keep retrieving your HTML from 
there, or to your local hard drive if you are using localhost. From 
there you know what to do: point your browser to your HTML file 
and watch the live, beautiful, real data from all those people around 
the world buying Mighty Gumballs! 


O 


0 


Houston, we have a problem! 
Come quick, were getting no 
sales data since we changed 
to the live servers! 


^ 


1 ■遞遗 

Mighty Gumball Sales 


㈧ hat?.’ IVcVc hot 
seeing a^y data/ 



Yikes! 


And everything was looking so 
good; we figured by this time we’d 
be sipping Perrier and celebrating 
another successful project with 
Mighty Gumball. Now the whole 
thing could go down in flames. 
Okay, we’re getting a little overly 
dramatic, but what the heck? This 
should have worked! 

Deep breath. Okay, there’s a 
logical explanation... 



Ko*bc *to Edrtov: actually 
y/e 七 Iioia # 七 we d be 

cMtCk and "t^is 

bookf Nov/ Wvc yb 
v^n 七 e ouV" way ou*t ok 
cc -r mc » 


a^otiicv- 


mess* 


、 A)ay, the Upset Quality quy 
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Ifsa cliffhawger! 


We’re not seeing any data in our page. It was all 
working fine until we moved to the live server... 

Will we find the problem? 


Will we fix it? 


Stay tuned... we’ll answer these questions, and more... 

And in the meantime, see if you can come up with 
ideas for what went wrong and how we can fix it. 


BULLET POINT$ - 

■ To get HTML files or data from a server, the 
browser sends an HTTP request. 

■ An HTTP response includes a response code 
that indicates if there was an error with the 
request. 

■ The HTTP response code 200 means the 
request had no errors. 

■ To send an HTTP request from JavaScript, use 
the XMLHttpRequest object. 

■ The XMLHttpRequest object's onload handler 
handles getting the response from the server. 

■ The JSON response to an XMLHttpRequest is 
placed in the request's responseText property. 

■ To convert the responseText string to JSON, use 
the JSON.parse method. 

■ XMLHttpRequest is used in applications to 
update content, such as maps and email, without 
requiring a page reload. 


■ XMLHttpRequest can be used to retrieve any 
kind of text content, such as XML, JSON, and 
more. 

■ XMLHttpRequest Level 2 is the most recent 
version of XMLHttpRequest, but the standard is 
still in development. 

■ To use XMLHttpRequest, you must serve files 
and request data from a server. You can set up 
a local server on your own machine for testing, 
or use a hosting solution. 

■ The XMLHttpRequest onload property isn’t 
supported by older browsers, like IE8 and lower, 
and Opera 10 and lower. You can write code to 
check for the browser version and provide an 
alternative for older browsers. 
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interviewing xmlhttprequest 



Pavt Z 

This week’s interview: 

Internet Explorer, and “Did you say JSON?” 

Head First ： Welcome back to the second part of the interview, XMLHttpRequest. I wanted to ask you about browser 
support — are you available in only the newer browsers only? 

XMLHttpRequest: The guys don’t call me “old man” for nothing; I’ve been supported by browsers since 2004. In 
Internet years I’m a senior citizen. 

Head First ： Well, what about obsolescence, do you worry about that? 

XMLHttpRequest: I’m someone who reinvents himself every decade or so. Right now, we’re all working on the 
second version of XMLHttpRequest, known as Level 2. In fact, most modern browsers already support Level 2. 

Head First ： Impressive. What is different with Level 2? 

XMLHttpRequest: Well, for one thing, support for more event types, so you can do things like track the progress of a 
request, and write more elegant code (in my opinion). 

Head First ： Speaking of browser support... 

XMLHttpRequest ： Okay, here it comes....wait for it... 

Head First: We Ve heard through the grapevine that you and IE don’t really get along... 

XMLHttpRequest: .. .and there it is...if you want the answer to that, all you have to do is read every interview I’ve 
ever given. But apparently, you missed it. Are you kidding me? This whole XMLHttpRequest business started with IE. 

Head First ： Yeah, but what about ActiveXObject and XDomainRequest? Have you heard those names before? 

XMLHttpRequest: Those are my nicknames! That’s what they call me at Microsoft! Okay, I agree it is a pain that we 
have different names for me, but they all do the same thing. It’s easily handled with a little more code, and in terms of 
the recent Microsoft browsers, version 9 and later, everything is good. If this is news to your readers, I’m happy to stay 
after the interview to make sure their code works on older versions of IE. 


Head First: That’s very kind, we’ll make sure that makes it into this chapter somewhere. - 

XMLHttpRequest: Hey, Fm a nice guy, I wouldn’t leave your readers hanging on this. 

Head First ： We’ll take your word for it. Another question: you mentioned JSON and that you are a big fan of it. Do 
you worry at all about, well, JSONP? 

XMLHttpRequest: What me? Worry? 

Head First ： Word on the street is a lot people are using it in place of you. 

XMLHttpRequest: Okay, sure, with JSONP you can retrieve data, but it’s just a clever hack. I mean, think of the 
convoluted code you have to write, and what about security? 

Head First ： Hey, I’m not overly technical, all I know is a lot of people say it gets them around problems you can’t 
solve. Anyway, that’s all we have time for. 

XMLHttpRequest: Heh, well at least you got the “not overly technical” part right. 
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The XMLHttpRequest onload property isn’t supported by older 
versions of browsers，but there’s an easy workaround. 

1/1/eVe been using request.onload to define a function that is called when the 
request finishes getting the data from the server. This a feature of XMLHttpRequest 
Level 2 (think of it as “version 2”). XMLHttpRequest Level 2 is still pretty new, so 
many users may still be using browsers that don’t support it In particular, IE 8 
(and lower), and Opera 10 (and lower) support only XMLHttpRequest Level 1. The 
good news is that the new features of XMLHttpRequest Level 2 are enhancements, 
so you can continue to use only the features of version 1 in all browsers without 
any problems; it just means your code isn’t quite as elegant. Here’s the code to 
use XMLHttpRequest Level 1: 



function init() { 

var url = "http://localhost/gumball/sales.json n ; 


Most -tKc todc *to 说 

^ 切— 头 Level I «s tKc sa^c... 

... But thcv-c is y\o \rc^ucs*t. 
onload pv-opevty m Level 
2-, so you II need *to use 

var request = new XMLHttpRequest () ; / *thc 

request. onreadystatechange = function () { fv-opcv-*ty ms*tcad- 

if (request.readyState == 4 && request.status == 200) { 

/W 仏⑶ the 
vcadyStaic b> suve 
ihc daia has domplrtcd 

loadmj. I-P veadyState is 午 , 

you k^oy/ its do^e- 
you dould also cMtcV -fov 
o-t^cv- v-cadyS-ba-tc and 
status values i-f you …扣七 
{jo cMttV -for various c^ors. 


updateSales(request.responseText) 


request .open (’ 'GET, url); 
request.send(null); 


^ Evcvy-thihg dsc is 

basically the sa^e. 
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reviewing what went wrong 


Remember, we left you with a 
cliffhawgcr? A bug. 

We had all the code working just fine using our local server, but as soon 
as we moved to the live server on the Web, it failed! 


What we expected; 


What we got: 


㈣ O O Mighty Cumball 

卜 I I 1Q~) 1^1 1 ~K| [*♦" hup://iocalhosl/gumbdiH/niiyhtygumball.hlm C Coogle 


㈣ O 门 Mighty Cumball 

M - 1 互 ® © 〔 +」0 hup://tocdlhosl/gumb<ill/mightYgumbdll.hmi Coogh 


Mighty Gumball Sales 

ARTESIA sold 8 gumballs 
LOS ANGELES sold 2 gumballs 
PASADENA sold 8 gumballs 
STOCKTON sold 2 gumballs 
FRESNO sold 2 gumballs 
SPRING VALLEY sold 9 gumballs 
ELVERTA sold 5 gumballs 
SACRAMENTO sold 7 gumballs 
SAN MATEO sold 1 gumballs 


Mighty Gumball Sales 


Here’s what our page looks like when 

we run the code using our local 

server to serve the sales data from 

http :// localhost/gumball/sales.json. 


Here’s what our page looks like when 
we run the code using the live Mighty 
Gumball server to serve the sales data from 
http :// gumball.wickedlysmart.com. 


So, what do wg do wow?! 

Why, let’s do what we always do, pull the crew 
together for a quick cubicle conversation. We’re 
sure that together, all of us (including a few 
fictional characters) can figure this out! Frank? 
Jim? Joe? Where are you? Oh, there you are on 
the next page... 


Ajay, the Quality 
与 uy, Jot 

pretty upset 
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I don’t know whafs going 
on with this code, Jim, but 
it just isn't working for me. 


O 





Jim: Do you have the correct URL? 

Frank: Yep, and in fact, I typed it into the browser 
to make sure I see the sales data we’re expecting, 
and it worked fine. I don’t get it... 

Joe: I peeked at the JavaScript console in Chrome 
and I see something about access control and 
origins or domains. 

Frank: Errrrr? 


Guys, where were you on 
the Starbuzz Coffee project? Remember 
we had a problem with the same behavior. I 
bet youve got cross-domain issues because you re 
requesting data from a server that is different 
than where your page came from. The browser 
thinks that is a security issue. 


Hmmmm, maybe you could 
refresh our memory on the 
browser security issues? 
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What Prowscr Security Policy? 

Okay, it’s embarassing to hit this kind of snag~just think of the position 
we’re putting you readers in — but Judy’s right, the browser does enforce 
some security around your XMLHttpRequest HTTP requests and that can 
cause some issues. 

So what is this policy? Well, it’s a browser policy, and it says you can’t 
retrieve data from a domain that is different from the domain the page itself 
was served from. Say you’re running the site for DaddyWarBucksBank.com 
and someone has hacked into your systems and inserted a bit of JavaScript 
that takes the user’s personal information and does all kinds of interesting 
things with it by communicating with the server HackersNeedMoreMoney. 
com. Sounds bad right? Well, to stop that sort of thing, browsers prevent 
you from making XMLHttpRequests to domains other than the original 
domain the page was served from. 

Let’s take a look at what is okay, and what isn’t: 

Acceptable behavior for JavaScript code: 



O First the user (through the browser) makes a request for an HTML page 
(and, of course, any associated JavaScript and CSS): 


Youv b\roy/scv 
makes a \rc<\ucs*t 
-for d 

^oodPomamtow'- 




scv-vcs you 
you\r 


GoodDomain.com 


❷ The page needs some data from GoodDomain.com so it makes a 
XMLHttpRequest for the data: 





Browser 


3 





GoodDomain.com 


scv-vcs you 
youv 
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Unacceptable behavior for JavaScript code: 

Now let’s see what happens when your page hosted at GoodDomain.com tries to 
make a request for data using XMLHttpRequest to BadDomain.com instead. 

Just like before, the browser makes a request for a page on GoodDomain.com. This may 
include JavaScript and CSS files that are also hosted at GoodDomain.com. 


Youv bv"oy/scv 
makes a vc<\ucst 
-fov- a pay Jrv-om 

^oodPomamdom. 



selves you 
youv- pay. 


But now we have code that wants data from another source, that is, BadDomain.com. 
Let’s see what happens when the page requests that data using XMLHttpRequest: 


Yoiav- pajc uses 
*to request ov\ 


BadPoma'rndom. 



Browser 



匕一 ^ Ti^c bv"ov/scv" sees 

is *to a di-f-fcv"Cr\*b 

domdm 七七 

av\d sU*b it doy/r\. 

Request defied- 



GoodDomain.com 



TV Badpomam.tom sewev ncvcv sees a 

七； you\r bvoy/sev-^s sc^u\ri*ty 

stops i-t bcW i*b cvc\r BadDomain.com 


you are here ► 


245 































reviewing our options 


Nice job, all this code and this won’t 
even work? Can’t we just copy our files 
to the Mighty Gumball servers? 


壯 least y \ o {, oy \ *bi^c kudyb 
七 he edrtov has usf 


Usually the answer is yes. 

Say you were a developer working on code 
for Mighty Gumball, then you’d typically 
have access to their servers (or to people 
who could deploy files to the servers for 
you), and you could place all your files 
there and avoid any cross-domain issues. 

In this case, however (and we do hate 
to break your suspension of disbelief), 
you’re not actually working for Mighty 
Gumball, you’re readers of this book, and 
we can’t think of a way to have a couple 
hundred-thousand people copy their files 
to the Mighty Gumball servers. 

So where does that leave us? Have we 
reached a dead end? No, we’ve still got a 
few options. Let’s step through them... 
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So, what are our options? 

We gotta be honest with you, we knew all along that the XMLHttpRequest cross-origin 
request would fail. But, as we just said, when you’re building apps you’ve often got access to 
the server and so this isn’t an issue (and if you’re building apps largely dependent on your own 
data, using XMLHttpRequest is usually the best way to do it). 

But at this point we can hear you saying “that’s great, but how can we get this code working 
already?” Well, we’ve got a couple ways to make that happen: 

(1) Plan 1: Use our hosted files. 

We’ve already put files on our server for you and placed the files at: 

http :// gumball.wickedlysmart.com/gumball/gumball.html 

Go ahead and give it a try by pointing your browser to this URL and you’ll be 
able to see the same code you typed in so far in action and working. 

( 2 ) Plan 2: Use another way to get the data. 


So, XMLHttpRequest is a great way to get data into your apps when that data is 
hosted at the same domain as your app, but what if you need to really get data from a 
third party? Say you need data from Google or Twitter for instance? In those cases we 
really do have to break through this problem and find another approach. 

As it turns out there is another way, based on JSON, known asJSONP (if you’re 
curious it stands for “JSON with Padding”； we agree that sounds weird, but we’ll walk 
through it in just a sec). Get your jetpack on because the way it works is a little “from 
another planet” if you know what we mean. 
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O 


o 


JSONP, guys, this is 
our chance to get ahead 
of Judy, for once. 


Joe: Totally! But, what is it? 

Jim: Sounds like it is another way to get data from web services into 
our apps. 

Frank: I’m useless here, I’m just the creative guy. 

Jim: Frank, I don’t think this is that bad. I quickly googled JSONP 
and basically it is a way of getting the <script> tag to do the work 
of retrieving the data. 

Joe: Huh, is that legit? 

Jim: Totally legit — a lot of big services are supporting it, like Twitter. 
Frank: Sounds like a hack. 

Joe: Well yeah, that’s what I was getting at. I mean, how can using 
the <script> tag be a kosher way of getting data? I don’t even get 
how that would work. 

Jim: I’m only a little way into understanding it myself. But think 
about it this way: when you use a 〈 script 〉 element, it is retrieving 
code for you right? 

Joe: Right... 

Jim: Well, what if you put data in that code? 

Joe: Okay, wheels are turning... 

Frank: Yeah, you mean hamster wheels... 
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Grasshopper, sit. 
Often what I teach, 
you already inherently 
know... 




HTML5 Guru: ...and this 
is one of those times. 

Grasshopper, look at the this code ： 

What does it do? 

Web Developer: When you evaluate it, assuming it is 
running in a browser, it will display an alert saying u woof〃. 

Guru: Ah, yes. Create your own simple HTML file and put a 
<script> element in it, in the body, like this ： 


iTWis Code is 

lo^a-tcd a*t 
■tWis URL- 


<script src="http :// wickedlysmart.com/hfhtml5 / chapter6 / dog.j s"> 
</script 〉 


Guru: What does it do? 

Web Developer: It loads the page, which loads the 
JavaScript from dog.js from wickedlysmart.com, which calls 
the alert function, and I see an alert with u woof 〃 displayed by 
the browser. 

Guru: So a JavaScript file, served from another domain, can 
call a function within your browser? 

Web Developer: Well, now that you put it that way, yes 
Guru, I guess that is what is happening. The dog.js file at 
wickedlysmart.com, once retrieved, calls alert in my browser. 

Guru: Youll find another file at ： 

http://wickedlysmart.com/hfhtml5/chapter5/dog2.js with 
the JavaScript ： 


animalSays("dog ", "woof"); 


Guru: What does it do? 
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Web Developer: It’s similar to dog.js, but it calls a function animal Says. It 
also has two arguments not one ： the animal type, and the animal sound. 

Guru: Write the function animalSays and add it in a <script> element in 
the head of your HTML file, above the <script> element that points to 
wickedlysmart. 

Web Developer: How’s this? 


function animalSays(type, sound) { 
alert(type + " says " + sound); 


Guru: Very good, youre progressing well. Now, change your other <script> 
reference, the one that points to dog.js, to point to dog2.js and reload the page 
in your browser. 

Web Developer: I get an alert that says ''dog says woof". 

Guru: Take a look at http://wickedlysmart.com/hfhtml6/chapter5/cat2.js, 
change your <script> reference to point to cat2.js and try that. 


animalSays("cat ", "meow"); 


Web Developer: I get an alert that says ''cat says meow”. 

Guru: So not only can a JavaScript file that was served from another domain 
call any function it wants in your code, but it can also pass us any data it wants? 

Web Developer: I don't see any data really, just two arguments. 

Guru: And arguments aren't data? What if we change the arguments to look 
like this ： 


var animal = {"type" : "cat ", "sound" : "meow"}; 
animalSays(animal); 



Web Developer: Now the function animalSays is passing one argument that 
happens to be an object. Hmm, I can certainly see how that object starts to 
look like data. 

Guru: Can you rewrite animalSays so it uses the new object? 

Web Developer: I II give it a try... 
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Web Developer: How’s this? 


talking to the web 


function animalSays(animal) { 

alert (animal. type + ，， says " + animal. sound); 


Guru: Very good. Change your reference to http://wickedlysmart.com/hfhtml5/chapter6 / 
dog3.js and try it. Try http://wickedlysmart.com/hfhtml5/chapter6/cat3.js too. 

Web Developer: Yes, both work as you would expect with my new function. 

Guru: What if you change the name of animalSays to updateSales? 

Web Developer: Guru, I don't see how animals are related to gumball sales? 

Guru: Work with me here. What if we rename dog3.js to sales.js, and rewrite it like this ： 


var sales = [{ n name ，'： n ARTESIA n , "time" : 1308774240669, "sales" : 8 }, 

{"name" : "LOS ANGELES” ， "time" : 1308774240669,"sales":2}]; 

updateSales (sales); 


Web Developer: I think I’m starting to get it. We are passing data through the JavaScript 
file were referencing, rather than using XMLHttpRequest to retrieve it ourselves. 

Guru: Yes, Grasshopper. But don't miss the forest for the trees. Are we not also getting it 
from another domain? Something that is forbidden by XMLHttpRequest. 

Web Developer: Yes, it appears that way. This seems truly like magic. 

Guru: There is no magic, the <script> element has always worked like this. The answer was 
within you all along. Now please go meditate on how this works to make it stick. 

Web Developer: Yes master. ''Make it stick 〃… you know that phrase sounds so familiar but 
I cant quite place it. 



I 它 N 

从。从它 MT 

Using JavaScript to retrieve data is something you have to become one 
with. Grab a sheet of paper or use the inside cover of this book. Draw a 
server that hosts your HTML & JavaScript files. Also draw a server at 
another domain that has the files dog3.js and cat3.js. Now go through 
the steps the browser uses to get and use the object in each file. When 
you think you’ve got it, we’ll go through it all again together. 
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jsonp overview 


Meet JSONP 

You’ve probably figured out that JSONP is a way to retrieve JS ON objects 
by using the 〈 script 〉 tag. It’s also a way of retrieving data (again, in the 
form of JSON objects) that avoids the same-origin security issues we saw 
with XMLHttpRequest. 


Let’s step through how JSONP works over the next few pages: 


^ The Bv-owscv 



<html lang=”en”> 

• • • 

<body> 

<hl>Mighty Gumball Sales</h > 

<div id=” sales ”〉 

</diV> /7 wickedly smart. com/ "X/scri P t> 

<scrip t src^http-.Z/guinball.wiC Y 

</body> 


In our HTML we 
include a <script> 
element. The source for 
this script is actually 
the URL of a web 
service that is going to 
supply us with JSON for 
our data, like our Mighty 
Gumball sales data. 


The JSON response 
is in the form of a 
string, which is parsed and 
interpreted by the browser. 
Any data types are turned 
into real JavaScript object 
and values, and any code will 
be executed. 


RcmCmbcv this is jus*b 3 
V-CpV-CSC^*ta*tioir\ ok the objedt 
at this 


3 , 



The server treats the request like 
any HTTP request, and sends back 
JSON in its response. 


(2) When the browser 
encounters the 
<script> element in the 
page, it then sends an 
HTTP request to the 
sre URL 


) 


〆 


Web Service 
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Put what is the r T J iw JSONP for? 


OK, the first thing you need to know about JSONP is it has a dumb and 
non-obvious name: “JSON with Padding.” If we had to name it, we’d call it 
something like “JSON with a Callback” or “get me some JSON and execute 
it when you get it back” or, well, really just about anything other than JSON 
with Padding. 

But, all the padding amounts to is wrapping a function around the JSON 
before it comes back in the request. Here’s how that works: 


The Bv-oy/scv 


o o. 

<! doctype html> 

<html lang=”en”> 

<body> 

<hl>Mighty Gumball Sales</h > 

<div id= n sales ”〉 

</diV> ,, v, wickedlysmart.com/"X/script> 

〈script src="http ： //g^all.wicked y 

</body> 


Same as before, we 
include a <script> 
element. The source for 
this script is the URL 
of a web service that is 
going to supply us with 
JSON data. 


This time when the JSON 
response is parsed and 
interpreted, it is wrapped in 
a function call. And so that 
function is called, and the 
object created from the 
JSON string is passed to it. 


3 


(2) Same as before, 
the browser 
encounters the 
<script> element in 
the page and sends an 
HTTP request to the 
sre URL. 


This time the JSOK is 

m a 灼 td\\- 



updateSales( 


And as before the server treats the 
request as normal and sends back JSON, 

but...this part is a little different. 

Before the server sends back the JSON 
string, it first wraps it in a function call, like a 
call to updateSales. 



Web Service 
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dealing with callbacks 



I see how to use the <script> 
tag to make the browser go retrieve JavaScript, 
and how the server can put its data in that JavaScript. 
What about the function name though? How does the 
web service know the right function name is? Like, how does 
the Mighty lumbal I web service know to call updateSales? 
What if I have another service and I want it to call, say, 
updateScore, or alert, or whatever? 


Web services let you specify a callback function. 


In general, web services allow you to specify what you want the 
function to be named. Although we didn’t tell you, Mighty Gumball 
is already supporting a way to do this. Here’s how it works: when you 
specify your URL, add a parameter on the end, like this: 

http : //gumball.wickedlysmart.com/?callback=updateSales 


-the usual URL 

v/cy/c usrnj. 


/W v/c vc added a URL 

parameter, dallbadk, says -to use 

JavaSd\rip*t is 3 ⑶ crated. 


Mighty Gumball will then use update Sales to wrap the JSON 
formatted object before sending it back to you. Typically, web services 
name this parameter callback, but check with your web service 
documentation to make sure that’s what they’re using. 



Try these URLs: what do you see in the response? 

http : //search.twitter.com/search.j son ?q=hfhtml5 &callback=myCallback 
http : //search.twitter.com/search.json?q=hfhtml5&callback=justDoIt 
http : //search.twitter.com/search.json?q=hfhtml5&callback=updateTweets 

No*tc ： Five-fox. v/ill dsk you *bo open ov~ save a -file- You opc 灼 

wi*th TextEdit ov- a^y basi£. 七 wt cdi*fco\r. 
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Guys, weve got this. It took us a while to 
wrap our heads around using a <script> element to 
hit a web service, but now it almost seems easier 
than using XMLHttpRequest. 


O 



Jim: Well, almost. 

Joe: I think this actually allows us to delete some code. 

Frank: And I'm ready to make it all look good when you’re done. 

Jim: So Joe, code-wise, what do you have in mind? 

Joe: With XMLHttpRequest we were retrieving a string. UsingJSONP, 
the script tag is going to parse and evaluate the code coming back, so 
by the time we get our hands on the data it will be a JavaScript object. 

Jim: Right, and with XMLHttpRequest we were using JSON.parse to 
convert the string into an object. We can just get rid of that? 

Joe: Yup. That’s my story and I’m sticking to it. 

Jim: What else? 

Joe: Well obviously we need to insert the 〈 script 〉 element. 

Jim: I was wondering about that. Where do we put it? 

Joe: Well, the browser is going to control when it loads, and we 
want the page to be loaded first, so we can update the DOM when 
update Sales is called. The only way I can think of dealing with that 
is to put the <script> at the bottom of the page in the body of the 

HTML. 


Jim: Yeah, sounds like a good guess. We should look into that a little 
more. But for starters let’s try it. 

Joe: Okay, I want to get this code working! Let’s get this code in! 

Frank: You guys better hurry, I bet Judy’s already got her own version 
in the works. 
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reimplementation plan 


Ufs update the Mighty frumball web app 


It’s time to update your Mighty Gumball code with JSONP. Other than removing 
the existing code that deals with the XMLHttpRequest call, all the changes are 
minor. Let’s make those changes now: 


What we need to do: 

① Remove our XMLHttpRequest code. 

② Make sure the updateSales function is ready 
to receive an object, not a string (as it was 
with the XMLHttpRequest). 

③ Add the <script> element to do the actual 
data retrieval. 


① All the code in our onload function was code involved in the XMLHttpRequest, 
so we can just delete it. We 1 11 keep the onload function around in case we need 
it a little later. For now it will do nothing. Open up your mightygumball.js file 
and make these changes： 


window.onload = function() { 

var url = "http : //gumball.wickedlysmart. com 
var request = new XMLHttpRequest(); 


for r^oy/, just delete alltk 


request, open ( n QB? n -url); 
request.onload = function()~f 


Code 


— (request.status == 200)t 



updat e Sal e s (request.responseText); 


tr 

request.send(null); 
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② Next, remember that when we use the <script> element, were telling the 

browser that it needs to retrieve JavaScript, and so the browser retrieves it, 
parses it and evaluates it. That means by the time it gets to your updateSales 
function, the J50N is no longer in string form, but is a first-class JavaScript 
object. When we used XMLHttpRequest, the data came back in the form of a 
string. Right now, updateSales assumes it is getting a string, so let’s change 
that so that it handles an object, not a string ： 


function u p dat e Sal e s (responseText)f- 
function updateSales(sales) { 


4 


var salesDiv = document.getElementByld( M sales"); 


Remove \rcsp0hsc7cx.-t \rcw\ri-tc "the 
Ime with a sales. 


- wc delete -the 

JSON pav-sc dal I -too. 

var div = document.createElement( M div M ); 
div.setAttribute("class", "saleltem"); 

div • inner HTML = sale. name + " sold " + sale. sales + " giomballs"; 
salesDiv.appendChild(div); 

。七 ha 七 ’s 七 
"to lid^dle ou\r data. 



var sales = JOON.parse(responseText); 
for (var i = 0; i < sales.length; i++) 
var sale = sales[i]; 


③ And finally, let’s add the <script> element to do the actual data retrieval. 


<!doctype html> 
<html lang= M en n > 
<head> 


<title>Mighty Gumball</title> 


<meta charset= n utf-8"> 

<script src= n mightygumball. js M X/script> 

<link re 1=" style sheet" href = n mightygumball • css’▼> 
</head> 

<body> 

<hl>Mighty Gumball Sales</hl> 

<div id= n sales M > 

</div> 



nis is I'mk bo 
gumball >/eb scvvidc. WlcVc 

dallba^k pa\ra^c*tcv- 
ouv -fur\d*tior\, 
updateSales, so >wcb 
scv"vi£.c y/vaps JSON 3 

-fur\d*tior\ tall *to ufd3*tc£3lcs. 


<script src="http : //gumball.wickedlysmart.com/?callback=updateSales M X/script> 


</body> 


</html> 
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testing jsonp 


Test drive your new JSONP - charged code 琢 


If you’ve made all your changes, it’s time for a test drive. Reload 
mightygumball. html into your browser. You’re now loading 


Mighty Gumball sales data using your web app and JSONP. The 
page should look the same as when you were getting the sales data 
from the local file, but you know that it’s 
using a whole different method of getting 
the data. 



Mighty Gumball 


◄ 

+ 

0http7/localhost/~Beth/HTML5/JavaScript5/migh C Google 



Mighty Gumball Sales 


Here’S y/Ka*t sec y/C 
\rcload AT— 七 y $ 山11 

州 . Vou II 

Cities a^d sales because 七 Vus 
•is real data. 



IMPERIAL sold 4 gumballs 
SAN FRANCISCO sold 5 gumballs 
CHINO HILLS sold 8 gumballs 
STANFORD sold 3 gumballs 
CARSON sold 9 gumballs 
GOLETA sold 6 gumballs 
BRADLEY sold 5 gumballs 
CAP AY sold 7 gumballs 
LANCASTER sold 8 gumballs 
SAN QUENTIN sold 5 gumballs 




Yes! The Mighty Gumball 
CEO should be happy with 
this. Time to par-tay. 
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JSONP seems 

security hole to me! 


It’s not any more or less secure than 
using <script> to load JavaScript. 

It，s true: if you make a JSONP request to a 
malicious web service, the response could include 
JavaScript code you’re not expecting and the 
browser will execute it. 

But it’s no different than including JavaScript by 
linking to libraries hosted on other servers. Any 
time you link to JavaScript, whether it’s to a library 
in the <head> of your document, or using JSONP, 
you need to be sure you trust that service. And if 
you’re writing a web app that uses authentication to 
give the user access to sensitive data, it’s probably 
best not to use third party libraries or JSON data 
hosted on other servers at all. 

So choose the web services you link to carefully. If 
you’re using an API like Google, Twitter, Facebook 
or one of the many other well-known web services 
out there, you’re safe. Otherwise, caution is advised. 



In our case, we know the Mighty Gumball 
engineers personally and we know they’d never put 
anything malicious in their JSON data, so you’re 
safe to proceed. 
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a chat with xmlhttprequest and jsonp 


Fireside Chats 



Tonight’s talk ： XMLHttpRequest and JSONP 

Tonight, we have two popular methods of retrieving 
data from your browser. 


XMLHttpRequest: JSONP: 

No offense meant, but aren’t you kind of a hack? I mean 
your purpose is to retrieve code, and people are using 

you to do requests for data. . 

Hack? I’d call it elegance. We can use the same means of 

retrieving code and data. Why have two ways of doing it? 

But all you’re doing is throwing some data in with 
code. And there’s no way for you to make your requests 
directly from JavaScript code; you’ve got to use an 
HTML < script 〉 element. Seems very confusing for 

your users. . . . 

Hey, it works, and it allows people to write code that 

retrieves JS ON from services like Twitter and Google 

and a lot of others. How are you going to do that with 

XMLHttpRequest given your security restrictions. I mean 

you’re still stuck on the old days, “XML,” heh. 

Hey XML is still in wide use, don’t knock it. And you 
can retrieve JS ON just fine with me. 

Sure, if you want to always JSON.parse the result. 

At least with me you’re in control of what data gets 
parsed into JavaScript. With you it just happens. 

That’s an advantage — by the time my users get their 
data, it’s all nicely parsed for them. Look, I have a lot of 
respect for you, you made this whole way of writing apps 
happen, but the problem is you’re too restrictive. Today, 
in this world of web services, we need to be able to make 
requests to other domains. 

Well you can go ahead and use a hack, like 
J S ON -With-Padding — heh, dumb name — or, you can 
use the right thing, XMLHttpRequest and grow with it 
as it evolves. After all, people are working on making me 
more flexible while still secure. 


Sure people are working on new ways, but my users have 
real needs today — they can’t wait for you to figure out all 
your cross-domain issues. 
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XMLHttpRequest: JSONP: 

And there’s nothing dumb about “padding,” it just 
means that when a user makes a web service request it 
also asks it to add a little prefix, like “updateSalesf)”，on 
to the result. And what were they calling you for a while? 
Ajax? Isn’t that a bathroom cleaner? 

I had nothing to do with the name Ajax, so don’t ask 
me! By the way，you never said how you are secure? 

Coders have always needed to be careful. If you’re 
retrieving code from another server, yeah you need to 
know what you’re doing. But the answer isn’t to just say 
“don’t do it.” 

All I can say is if you don’t need to go get someone else’s 
data, like Twitter or Google, and you’re writing your 
own web service and client, stick with me. I’ve got more 
security and I’m more straightforward to use. 

Hello? No one is writing services that don’t use outside 
data. Ever heard the name “mashup?” 

Yeah yeah, mishmash. 

Hey, at least I’m consistently supported everywhere, 

I’d hate to have to write XMLHttpRequest code that 
worked across old browsers. 

Gome on, it doesn’t take that much code to support me 
going all the way back to IE5. 

Haha, for me it takes ZERO code. Just a simple 
HTML tag. 

Yeah, well there’s more to it than that, and have you 
ever tried to do something iterative, where you need 
to retrieve something over and over? Like that Mighty 
Gumball thing they’ve been working on. How are they 
going to make that work? 

Hey, it’s not that bad. You just need to use write a new 
<script> element into the DOM to do another request. 

Here’s my impression of your readers having just heard 
the sentence you just said: “Say what?” 


HEAD FIRST: 

Thanks guys! I’m afraid we’re out of time! 
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You came up a little short. I 
thought I was going to see a constantly 
updated stream of sales from my gumball 
machines. Sure, I could hit refresh on my 
browser, but then I see only the newest 
reports, and only when I manually refresh. 
Thafs not what I want! 


O 



He’s right, we need to change our app so that it is updating the display with new sales 
at some regular interval (say, every ten seconds). Right now we’re just putting a <script> 
element into the page that initiates the request to the server only one time. Can you 
think of any way to use JSONP to continually retrieve new sales reports? 


Hm-t ： usm5 VOM v/c ^ mscvt d ^ <sdvip*t> 
element m*to Could i\\ai >/ovk? 
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Guys, I just heard the 
Mighty Gumball CEO isn't exactly 
happy with your first version? 



Jim: Yeah, he wants the data to be continually updated in the display. 

Judy: That does make sense. I mean one big advantage of a web 
app is you don’t have to refresh it like a web page. 

Joe: Fair enough, and obviously we know how to replace old sales 
data with new sales data in the page using the DOM. But we’re not 
sure yet how to handle the JSONP part. 


Judy: Remember, you can use the DOM with the <script> 
element too. In other words, you can create a new < script 〉 
element in the DOM any time you want to retrieve more data. 

Jim: Okay, right over my head. Can you say that again? 

Joe: I think I sort of get it. Right now, we’re putting the <script> 
element statically in the HTML markup by just typing it in. We 
could instead create a new <script> element with JavaScript code, 
and add it to the DOM. The only part I’m not sure of is, will the 
browser do another retrieval when we create the new <script> 
element? 


Judy: It sure will. 

Jim: I see, so we’re creating a new〈 script 〉element any time we 
want the browser to do aJSONP-type operation for us. 

Judy: Right! Sounds like you’re getting it. And you know how to do 
it over and over? 


Jim: Well, uh, we’re not there yet, we were still thinking about the 
JSONP. 


Judy: You know all about handler functions by now, you know 
like onload or onclick. You can set up a timer to call a function 
handler at a specified interval using the set Interval method in 
JavaScript. 

Joe: So, let’s get that set up and get the dynamic JSONP working 
ASAP for the Gumball CEO. 

Jim: Oh, is that all you want? We better get on it! 
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Improving Mighty frumball 

As you can see we have a little more work to do, but it’s not going to be too bad. 
Basically, we wrote our first version so that it grabs the latest sales reports from 
Mighty Gumball and displays them, once. Our bad, because almost any web app 
these days should continuously monitor data and update the app in (near) real time. 

Here’s what we need to do: 


① We're going to remove the JSONP <script> element from the 
Mighty Gumball HTML, because we won’t be using that any more. 

② We need to set up a handler to handle making the JSONP 
request every few seconds. We 11 take Judys advice and use 
JavaScripfs setlnterval method. 


③ 


Then we need to implement our JSONP code in the handler, so 
that each time it is called it makes a request to get the latest 
Mighty Gumball sales reports. 


Step 1: Taking care of the script element... 

We’re going to be using a new way to invoke our JSONP requests, and so let’s go 
ahead and remove the〈 script 〉element from our HTML. 


<!doctype html> 

<html lang= M en n > 

<head> 

<title>Mighty Gumball</title> 
<meta charset= n utf-8"> 


<script src= n mightygumball. js M X/script> 

<link rel= n style sheet ▼’ href= n mightygumball. css n > 
</head> 


<body> 

<hl>Mighty Gumball Sales</hl> 
<div id= n sales M > 

</div> 



Vou cav\ 50 a^edd a^d delete 

-fvorw you\r HTML ^.lc. 


<seript sre= M http : //gumball.wiekedlysmart.com/?eallbaek=update3ales n X/seript> 
</body> 

</html> 
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Step Z: Now ifs time for the timer 

Okay, we’re progressing from retrieving the sales reports once, to retrieving them 
every so often, say every three seconds. That might be too fast or slow depending on 
the application, but for Mighty Gumball we’re going to start with three seconds. 


Now, to do something every three seconds we need to have a function we can call 
every three seconds. And, as Judy mentioned, we can use the setlnterval method 
in the window object to do this; here’s what it looks like: 



setlnterval(handleRefresh r 



丁 he sct/h-tcv-val 
method -takes a 
hahdlcv* ahd a 
"mtcv-val. 



ou\r 

y/hidh y/cll de^'me m a set. 


3000); 



f[Y\d Kcvc s ouv tiw'C *m*bcwal 

c^pv-csscd m miHisc£.or\ds. 

1000 millisc^ds - l seconds. 


So every 3,000 milliseconds JavaScript will invoke your handler, in this case the 
handleRe fresh function. Let’s write a simple handler and give it a try: 

function handleRe fresh () { ^vevy tiw'C 七 iVis is Edited will 

alert ("I'm alive") ; ^ sedor^ds), v/C II 七 Wo 如 

. up alev 七 叩州 alWe. 


Now we just need some code to set up the setlnterval call, which we’ll add to the 
onload function so it gets set up right after the entire page is loaded: 


window • onload = function () { JKis is ouv- old o^lodd 

setlnterval (handleRefresh, 3000) ; y/WA had 灼。七 m i 七 a-ftev- y/C 

} deleted )</V|LHUpRc«\ucst Codt. 



A u d T d r ^ d ° ，S add ou ^ ^ al1 ^ 兄仏七饮从 whidh, 

whCh the Ihit -fuhdtioh is \ruh, will stav-t a tir^cv- -that -Pi^cs 

ewy thvee sc^ohds ahd dalls ouv hahdlcRc^csk 


Let’s give this a try and then when we know it’s working — that is, when we see our 
our handler being invoked every three seconds — we’ll implement the JSONP code. 
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testing an interval timer 


A timc-drivcw test drive 琢 


This should be fun. Make sure you’ve typed in the handleRefresh 
function and also made the changes to the onload handler. Save 
everything and load it into your browser. You’ll see a stream of alerts, and 
you’ll have to close your browser window to stop it! 


0 


http://localhost 

I’m alive 


OK 


J 


^Sharpen your pencil 


七， 


Now that you know about setlnterval (not to mention 
XMLHttpRequest and JSONP), think of ways you could use them 
in other web applications. List those here: 


Chcdk by\A update pvojv-css a task by\A display it 

See i-f a^y 乙 omme 灼 *ts have bee 灼 pos-ted oy\ a *topid. 

Update d map i-f -fv-ic^ds have shov/^ up ^cav-by. 
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Step 3: Reimplementing JSONP 

We still want to use JSONP to retrieve our data, but we need a way to do it 
whenever our refresh handler is called, not just at page load time. That’s where the 
DOM comes in — the great thing about the DOM is that we can insert new elements 
into the DOM at any time, even 〈 script 〉 elements. So, we should be able to insert 
a new <script> element any time we want to make a JSONP call. Let’s work up 
some code using everything we know about the DOM and JSONP to do this. 


First let's set up the JSONP URL 

This is the same URL we used with our previous script element. Here 
we II assign it to a variable for later use. Delete the alert out of your 
handler and add this code ： 


WcVc badk m ouv 


function handleRefresh() { 


.HcvC) v/cVc JSONP URL 

f assi^m^ i*t *to vav-iablc uv-|. 


var url = "http : //gumball•wickedlysmart.com?callback=updateSales n ; 


Next let's create a new script element 

Now, instead of having the <script> element in our HTML, were going 
to build a <script> element using JavaScript. We need to create the 
element, and then set its sre and id attributes ： 


function handleRefresh() { 

var url = "http : //gumball.wickedlysmart.com?callback=updateSales M ; 

Fivs*t> v/c 乙 d 


var newScriptElement = document.createElement( n script") 




newScriptElement.setAttribute("sre", url); 
newScriptElement.setAttribute( n id n , "jsonp"); 

t , 

The sc*tA*t*tvibu*tc method w\igh*t look y\c^ *to you (wc vc only 

i*t m passing so bu 七 i*t’s pretty easy *to sec v/ha*t i*t 

docs. The sc*tA*t*tvibu*tc method dllov/s you *to sc*t "the a*t*tvibu*tcs 
扣 HTML element like 七 he sv-d id a*t*tvibu*tcs o\r a ^umbev- 
o*thcv-s dldss； h\rc-f so oy\- 


s£rip 七 el 加⑼七 … 

… ar^d sti tiic srC a*bbribu 七 e 
七 he clci^cr\*t *to ouv JSONP WRL. 

v/cll jive sdv-ip*t id so 
y/c ddr\ easily yt i 七 y/hidh 

v/cll r\ttd b>, as you II sec- 
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jsonp dom insertion 


How do we insert the script into the POM? 

We’re almost there, we just need to insert our newly created script element. Once we 
do that the browser will see it and do its thing, causing the JSONP request to be made. 
Now, to insert the script requires a little bit of planning and forethought; let’s see how 
this is going to work: 


® We start with out with 
a DOM, with no "jsonp" 
<script> (at this point, we just 
have the <script> that links to 
our JavaScript code). 



In our code we're going to 
need to get a reference to 
the <head> element. 




And then we're going to insert 
the new <script> element into 


the <head> element. 


Once we’ve inserted the script, the browser will see the new script in the DOM and go retrieve 
what's at the URL in the sre attribute. Now, we’ve also got a second use case. Let’s look at it. 


/Cpv Now except for the first time 
handleRefresh is called, there's 
already going to be a "jsonp" <script> 
element in the DOM. 



in TnaT case we ii, again, 
grab a reference to the 
head element. 



And this time we'll replace the existing element with our 
new one, rather than appending the new script to the DOM. 
It would work to append the new script-that is, the browser 
would invoke the JSONP call-but, over time, wed build up a 


huge collection of <script> elements in the DOM, which can have 
performance implications. So replacing the element is better. 


268 


Chapter 6 














































talking to the web 


Now let's write the code to insert the script into the POM 

Now that we know the steps, let's check out the code. We II do this in two 
steps too ： first well show the code to add a new script, then the code to 
replace a script ： 


function handleRefresh() { 


var url = "http : //gumball.wickedlysmart.com?callback=updateSales n ; 


var newScriptElement = document.createElement( n script"); 
newScriptElement.setAttribute( n src n , url); > 
newScriptElement.setAttribute("id", "jsonp"); / 


WlcVc *to yt 七 he 

*to <sdv*if*t> element 

|-f doesn't >wdl badk 内 ull. 

Notice >wcVc douy>*tm 5 oy \ i*t hav’nr^ 
*tKc id W jso^f. W 


var oldScriptElement = dociament. getElementByld ( n j sonp"); 
var head = document.getElementsByTagName("head")[0]; 
if (oldScriptElement == null) { 

head.appendChiId(newScriptElement); 


Next wcVc goihg -to get a 
>rt^crty\U -to the <\\cad> demeh-t 
usm 9 ^ ⑽ w do^urwCh-t rwethod- 

II Cornt bddk "(jo how "this wo\rks. 
but -Pov how jus-t khow i-fc gets B 
-to the <hcad> elemehi. 


Now i\\ai v/c have a b> -the <hcad> v/c dhcdk -to sec i-P theve 

is alv-cady a <sdv-ip-t> a^d i-P thcv-c is^-t (i-P its v-c-Pcvc^dc is null) 

v/e ahead and append the <sdv-ipt> ele 你⑶七 "to -the head- 


Okay, let's check out the code that replaces the script element if it 
already exists. Well just show the conditional if statement, which is 
where all the new code is ： 

ftcvVs ou\r do 的 drtiohdl verwembev i*t is jus*t *to sec 

i*f a <sd\rip*t> clem ⑶七 already e 乂 is*ts m 七 he DOM- 

if (oldScriptElement == null) { 

head.appendChiId(newScriptElement); 

} else { 

head.replaceChild(newScriptElement, oldScriptElement); 

} 

^ l-f is already a <sdv-ip*t> elemerrt m -the head, y/c jus-t 

、 vcpladc it Y® u 匕扣 use v-cpIadcChild w\c*thod oy \ *thc <hcad> 
elemeirrt pass i*t old sdv-ip*ts -to do iVdl 

look a little mov-c dloscly a*t *this mevj method *m a scd. 
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close 叩 of more dom methods 



gefEjei^entsByTagj^atne Up Cl^se 


This is the first time you’ve seen the getElementsByTagName method, so let’s take a 
quick up close look. It’s similar to getDocumentByld, except that it returns an array 
of elements that match a given tag name. 

gclElcmch-tsByTag/s/amc v-cWhs a\\ -the 
ih "the l)0M with this -fcoig. 

var arrayOfHeadElements = document .getElementsByTagName (’ ’head' 1 ) 

I 灼 *tKis dasc it vc-tuv^s av\ array 

Jc iiedd clcrwc^*b. 一 


Once you have the array, you can get the first item in it using index 0: 

Rctuv^s {\\t -fiv-s-t iicad element 
•m avvay (ar\d -tKcv-c should 


var head = arrayOfHeadElements[0]; 


Now we can combine these two lines, like this: 


be or\ly ov\t, 


var head 


document. getElementsByTagName ("head") [0] ; 

Wc yt {\\t avvay dy\d 七 ’mde* m*to 
avray *to %七 the -f 'ivs-t item m ov\t step. 


In our code example, we’re always using the first <head> element but you can use this 
method on any tag, like <p>, <div> and so on. And usually you’ll get more than one of 
those back on the array. 


ref]ace 0 hiltj Tip C]<sse - 

Let’s also look at the replaceChild method because you haven’t seen that before. 

Gall the replaceChild method on the element in which you want to replace a child, 
passing in the references to both the new and old children. The method simply replaces 
the old child with the new one. 


The vcfUdcCKild wthod *tclls <i^c3d> 
element -to vcpladc ov\t o( *rb dUd\rCh 

oldSdvif 七此 v/'ith a t\\\\A, 

w/Sdvif 七 灼七 . . 


0 u\r new 


<sdv-ipi> 


head.replaceChild(newScriptElement, 


T\\t <st\r\p*b> 

七 ha 七 , s already ^ 

*m i\\t pay. J 

oldScriptElement); 
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tWeiqre nQ ^ 

Dumb Questi9ns 


Q/ Why can’t I just replace the data in the src 
attribute instead of replacing the whole <script> 
element? 

If you replace just the src attribute with the new 
URL, the browser doesn’t see it as a new script, and 
so it doesn’t make the request to retrieve the JSONP. 

To force the browser to make the request, we have to 
create this whole new script. This is a technique known 
as “script injection.” 

What happens to the old child when I replace 
it? 

It’s removed from the DOM. What happens from 
there depends on you: if you’ve still got a reference to 
it stored in a variable somewhere you can continue to 
use it (in whatever way might make sense). However 
if you don’t, the JavaScript runtime might eventually 
reclaim the memory the element is taking up in your 
browser. 

What if there is more than one <head> 
element? Your code seems to depend on there 
being only one head when you index by zero in the 
array returned by getElementsByTag? 

By definition, an HTML file has only one <head> 
element. That said, sure, someone could type two into 
an HTML file. In that case your results may vary (and 
that’s what you get for not validating your HTML!), but 
as usual, the browser will do its very best to do the right 
thing (what that is, just may depend on the browser). 

Can I stop the interval timer after I start it? 

You sure can. The setlnterval method actually 
returns an id that identifies the timer. By storing the id 
in a variable you can then pass it to the clearlnterval 
method at any time to stop the timer. Closing your 
browser also stops the timer. 


How can I know the parameters a web service 
uses? And if it supports JSON and JSONP? 

Most web services publish a public API that 
includes the ways you can access the service as well 
as all the things you can do with the service. If you’re 
using a commercial API you might need to get this 
documentation directly from the provider. For many 
public APIs you’ll most likely find the information you 
need through a web search or on the organization’s 
developer section of their web site. You can also visit 
sites like programtheweb.com, which documents the 
growing list of APIs out there. 

XMLHttpRequest is obviously older than 
HTML5, but what about JSON and JSONP? Are they 
part of HTML5? Do I need HTML5 to use them? 

We’d call JSON and JSONP contemporaries of 
HTML5. While neither one is defined by an HTML5 
specification, they are in heavy use by HTML5 
applications and are a core part of building web 
apps. So, when we say HTML = Markup + JavaScript 
APIs + CSS, well, JSON and JSONP are very much 
part of that picture (as are requests using HTTP with 
XMLHttpRequest). 

Do people still use XML? Or is everything 
JSON now? 

One truism in the computer industry is that 
nothing ever dies, and so we're sure we’ll have XML 
for a long time to come. That said, we’d also say JSON 
has momentum right now and so lots of new services 
are being created using JSON. You’ll often find that 
many web services support a variety of data formats 
including XML, JSON and many others (like RSS). 
JSON has the advantage that it is based directly on 
JavaScript and JSONP gets us around cross domain 
issues. 
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Wc almost forgot: watch out for 
the dreaded browser cache 


We’re almost ready to go here, but there’s a small detail we need to 
take care of, and it’s one of those “if you’ve never done it before, how 
would you know you need to address it” kind of issues. 

Most browsers have an interesting property in that if you retrieve the 
same URL over and over (like our JSONP request will), the browser 
ends up caching it for efficiency, and so you just get the same cached 
file (or data) back over and over. Not what we want. 


Luckily there is an easy and old-as-the-Web cure for this. All we do 
is add a random number onto the end of the URL, and then the 
browser is tricked into thinking it’s a new URL the browser’s never 
seen before. Let’s fix our code by changing the URL line above to: 



Youll -this dodc ai *tof 
<^p youv 七 i。”. 



you\r URL 
above -to 
look like 七 his. 




var url = "http://gumball.wickedlysmart.com/?callback=updateSales n + 

"&random=" + (new Date ⑴ .getTime(); 


IVcYc adding a v\c^, pav-arweiev- 

ok> ihc ty\A o( -the URL. The web 
sc\rvc\r v/ill \usi it, bu 七 it’s 

-to take oui ihc bvowsev-. 


Wc trtaic a mw Date object, use 
ytTimC mC*t^od o( objct*t *to 

y 七七 imC i 的 miHiscdor>ds> 

-the *timc *to Cr>d o-f URL- 


With this new code, the generated URL will look something like this: 


This ^>av-*t should look … va^dom pav-amc*tcv. 

^ 4 / 

http : //gumball.wickedlysmart.com? callback=updateSales &random=1309217501707 

" - ■ '〆 

f 

This part Will catK time b> dc-fcai 


Go ahead and replace the url variable declaration in your 
handleRef resh function with the code and then we’ll be ready 
for a test drive! 
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Mighty Gumball Sales 

LOS GATOS sold 2 gumballs 
COURTUND sold 3 gumballs 
COURTLAND sold 


FRESNO sold 5 


FRESNO sold 5 


Owe more TIME test drive 


Alright, surely we’ve thought of everything this time. We should be all 
ready. Make sure you’ve got all the code in since the last test drive, and 
reload the page. Wow, we’re seeing continuous updates! 


lAfei-b a sed … ave you y/ha 七 

y/cVc IA/hd"b 3V-C *t^CSC 

dupka 七 es? That’s ⑽七 ^ood- 

/^laybc y/cVc vc-tvievi^ too 

^Past and ybti% veforb vc 
dlveady vc-tvic^cd? 


PufkaW 


How to remove duplicate sales reports 


If you take a quick look back at the Gumball Specs on page 228, you’ll see that 
you can specify a last report time parameter in the request URL, like this: 




Vou ^ also add a ^ ^ URL 


a^d you II o^ly i\\t vcfovb smdc *t^al time. Use rb like 

http://gunaDall.wickedlysmart.com/?lastrepor^^^ 


— - — ■ — 

Just spc^i-Pyatir^ 
m nrtillise^ohds. 


That’s a great, but how do we know the time of the last report we’ve retrieved? 
Let’s look at the format of the sales reports again: 


[{ "name" : n LOS ANGELES" , "time" : 1309208126092 , "sales" : 2}, 
{"name" : "PASADENA","time" : 1309208128219,"sales":8}, 

{"name" : "DAVIS CREEK", M time M :1309214414505,"sales":8 } 「 


Eadh sales \rcpo\rt 
hds *thc *timc i 七 
v/ds \rcpo\rtcd. 
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using a web service parameter 


o 


O 


I see where you re going with this; we can 
keep track of the time of the last report, and 
then use that when we make the next request 
so that the server doesn’t give us reports 
we've already received? 




吆 . 


You got it. 

And to keep track of the last sales report received we’re going to need 
to make some additions to the updateSales function, where all the 
processing of the sales data happens. First, though, we should declare 
a variable to hold the time of the most recent report: 

^ — TV\c 七 ” l css fVt this at the "top 。( 

var lastReportTime = 0; z^v-o, so let s jus you\r JavaS^\rip-t -pile, 

sc 七 vt 0 k stavtcn outside -Puhdtioh. 


And let’s grab the time of the most recent sale in updateSales : 


function updateSales(sales) { 

var salesDiv = document.getElementByld( n sales n ); 
for (var i = 0; i < sales.length; i++) { 

var sale = sales[i]; 

var div = document.createElement( n div n ); 
div. setAttribute ('▼ class, "saleItem"); 
div. innerHTML = sale.name + ’▼ sold '▼ + sale, sales + 
，▼ gumballs"; 

salesDiv.appendChild(div); 


if (sales.length >0) { 

lastReportTime = sales[sales.length-1].time; 


> / 

l-r you look at the sales avvay, youll sec 

"that "the rwos-t YtCtY\{, sale is -the las-t or\C \y\ 

七 he avvay. So heve wcVc assi^m^ -that b> 

ou\r variable las-tRcpovtTi nr»c- 



We r\tt& bo make suve tKcvc IS a\r\ray 
i-f avc y^o v\t>N sales, 
y/c'd back a” a\rvay a^d ouv 

toAt iicvc y/ould dause d 的 c%^cp*tioy>. 
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Updating the JSON URL to include the lastreporttimc 

Now that we’re keeping track of the last reported sales time, we need to make 
sure we’re sending it to Mighty Gumball as part of the JSON request. To do 
that, we’ll edit the handleRef resh function, and add the lastreporttime 
query parameter like this: 




lA/cVC Sfl'i-t URL m-to 

several s*br’my 七七叫 c 


function handleRefresh() { 

var url = "http : //giomball. wickedlysmart. com" + 

"?callback=updateSales M + 

"&lastreporttime=" + lastReportTime + , 

^ … Bv\d hcv-cs the lastv-CPoytti^C 

” & random=" + (new Date()).getTime (> ; ^ ^ its ^ va | uc . 

var newScriptElement = document • createElement (▼▼ script ”）； 
newScriptElement.setAttribute (’ 'src n , url); 
newScriptElement.setAttribute("id", "jsonp"); 
var oldScriptElement = document.getElementByld( n j sonp"); 
var head = document.getElementsByTagName("head")[0]; 
if (oldScriptElement == null) { 

head.appendChiId(newScriptElement); 

} 

else { 

head.replaceChild(newScriptElement, oldScriptElement); 


Test drive lastReportTime 


Let’s take the last reporttime query parameter for a test run and see if it 
solves our duplicate sales reports problem. Make sure you type in the new code, 
reload the page, and click that refresh button. 


' Mighty Cuctibill _ 

| + J«« hiip Nioctiwtt/- Bctri/HTyLS/iavtSifUKS/rWflhtv ： ~^| <^£^1 

Mighty Gumball Sales 

LOS ANGELES sold 3 gumballs 
LOS ANGELES sold 9 gumballs 
ATWATER sold 8 gumballs 
FARMINGTON sold 1 gumballs 
FARMINGTON sold 1 gumballs 
GARDEN GROVE sold 3 gumballs 


(v/i 匕 ef Noy/ v/c yt or\ly 
sales vefovts, so all 七 he 
duflitaics av-c ^ov\t\ 
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you’ve outdone yourselves! This works 
great and now I can totally keep up with 
sales at my desk or when I’m mobile. Tm 
starting to really think there is something 
to these web apps. Just think what were 
going to be able to do with gumball machines, 
JSON, and all those HTML5 APIs! 



'calhost/~beth/HTML 


FOOTHILL RANCH 


PALOS Vi 
gumballs 


LOS ANGELES sold 8 


ANGELES sold 4 
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talking to the web 


BULLET POINTS - 

■ XMLHttpRequest does not allow you to request 
data from a different server than the one from 
which your HTML and JavaScript are being served. 
This is a browser security policy designed to 
prevent malicious JavaScript from getting access 
to your web pages and a user’s cookies. 

■ An alternative to XMLHttpRequest for accessing 
data hosted by web services is JSONP. 

■ Use XMLHttpRequest when your HTML and 
JavaScript are hosted on the same machine as 
your data. 

■ Use JSONP when you need to access data hosted 
by a web service on a remote server (assuming 
that web service supports JSONP). A web service 
is a web API that is accessed by HTTP. 

■ JSONP is a method of retrieving data by using the 
〈 script 〉 element. 

■ JSONP is JSON data wrapped in JavaScript; 
typically, a function call. 

■ The function call that wraps the JSON data in 
JSONP is referred to as a “callback.” 


■ Specify the callback function as a URL query 
parameter in a JSONP request. 

■ JSONP is no more (or less) secure than linking to 
JavaScript libraries using the <script> element. Use 
caution whenever you link to third-party JavaScript. 

■ Specify the <script> element to make the JSONP 
request by adding it directly to your HTML, or by 
writing the <script> element to the DOM using 
JavaScript. 

■ Use a random number on the end of your JSONP 
request URL if you are making the request multiple 
times so the browser doesn't cache the response. 

■ The method replaceChild replaces an element in 
the DOM with another element. 

■ setlnterval is a timer that calls a function at a 
specified interval. You can use setlnterval to make 
repeated JSONP requests to a server to retrieve 
new data. 
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giving your brain some exercise 



HTML5cross 


Wow, you got your apps talking to the Web in this chapter! 
Time for some left-brain activity to help it all sink in. 



Across 

2. The pattern of using XMLHttpRequest to get data 

from servers is sometimes called_. 

5._is the latest Mighty Gumball Web-enabled gumball 

machine. 

8. XMLHttpRequest made fun of JSONP’s_. 

10. The Guru teaches Grasshopper that function arguments 
are also_■ 

12. We were_to get twenty-five pages into the 

chapter before discovering the browser security policy. 

15. One of XMLHttpRequest's nicknames at Microsoft. 

16. JSONP stands for “JSON with ”. 


Down 

I. JSONP uses a_ 

3. JSONP uses these types of objects. 

4. Format we all thought would save the world. 

6. _has a JSONP Web service. 

7. This chapter had one of these in the middle. 

9. Mighty Gumball is testing the MG2200 in_ 

II. _reminded Frank, Jim, and Joe about the 

cross-domain security issues with XMLHttpRequest. 

13. It’s easy to set up a local server on a_. 

14. _, the QA guy, was upset when the request to the 

production Gumball server failed. 
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talking to the web 


A Special Message 
from Chapter 7... 



0 


O 


We like to say ''if ifs 
worth tweeting, ifs worth 
printing on a t-shirt .〃 
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exercise solutions 



HTML5cross Solution 
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7 bringing out your inner artist 

The Canvas ♦ 



HTML’s been liberated from being just a “markup” language. 

With HTML5’s new canvas element, you’ve got the power to create, manipulate and destroy ^ - ^ 

pixels, right in your own hands. In this chapter we'll use the canvas element to bring out 
your inner artist — no more talk about HTML being all semantics and no presentation; with 
canvas we're going to paint and draw with color. Now it's all about presentation. We’ll tackle 
how to place a canvas in your pages, how to draw text and graphics (using JavaScript, 
of course), and even how to handle browsers that don't support the canvas element. And 
canvas isn't just a one-hit wonder; you're going to be seeing a lot more of canvas in other 

chapters in this book. ^ v/c hcav <^a^vas> <vidco> have shav-'m^ mov-c 

jus*t web pays … well yt m*to the juity details latcv-. 


Okay, 
u dcstv-oy w 
be a 
little ovcv-ly 
dv-arna-ti^. 


this is a new chapter 
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the new start-up tweetshirt 


Our wgw start-up: TwcctShirt 



Our motto is “if it’s worth tweeting on Twitter, it’s worth 
wearing on a t-shirt.” 

After all, half the battle of calling yourself a journalist is 
being willing to put your words in print, so what better 
place than printing on your or someone else’s chest? At 
least that’s our start-up pitch, and we’re sticking to it. 


Now, there’s only one thing that stands in the way of getting 
this start-up off the ground: we need a nice web app that lets 
customers create a custom t-shirt design, featuring one of 
their recent tweets. 



-ley d wl y ° U f V" 7 9 ° ° Ut " hd d ° iWl$ " hd ^ 


o\r 
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We like to say ''if ifs 
worth tweeting, it’s worth 
printing on a t-shirt.” 



Chapter 7 


What we need is a t-shirt 
web app that lets our users 
create a hip presentation of 
their favorite tweet. 


Let's also make sure this works on 
devices. Just like they use Twitter while 
mobile, our customers will be ordering 
this on the move, in real time! 







bringing out your inner artist 


Checking out the "comps 


jj 


After exhaustive iterative design and 
extensive focus group testing we’ve 
got a comp (otherwise known as an 
initial visual design) ready for you to 
review, let’s take a look: 


Yeah ton\t oy \ y/cVc d stairt—uf, wc 

VI did this a ^apk'm at S-tav-buz^. 


rteves i\\t 
七一 sW»rt Ats\^ 



s; r 


v/cb app should look ju 
like *this pajc, i-r possible/ od 


iust 

wov-ds wc wa^*t *bo display 七 he 
shiv •七 dcsi^ d^d allow usev- *to 
'm*tcv-a^*tivcly i*t *thc 

usev- 乙 oirrbrois. 


1 this 


tweet 


Allow useir h> dhoosc 

\C ——o 一 to\oY. HcV'C 
■theyW (ihosch white. 


(fifs 


冰 ortfi 


m 


参 


eefl ^, u 


s 


_/功 


C ⑽ 1 cs ， 扣 es , 

^ ih c 

b ^ou^d Mo iwo 
s ^ts alike, so 
heed io be 
^don>ly pls^cd/ 


pUtf ^gona^ 

刪 a «, ⑽ 


， e ^txhi n 


Was th is io 


Us yt'Shirt! 


/ 


/ 


/ 


/ 


/ 


h/oiide the 
di-Pfcvch-t styles 

text -too. 


A^d heve’s wha-t the 
use\r \v\i^diU should 




The usc\r C^y\ select 
the be)^k^\TOUhd toloV', 
乙 i\rdcs o\r s^uolv-cs, 

the text Co\oy By\d 
the ty/cct. 




Select bac^grouNcl color ： [white” ) 
Grcle^or ㈣ re$? 【 ci 峨 1:1 


Select feet color ： f eiacH/: j 

Rck 3 tw99t* [ g^tarbuzzeeo VfouVeoja 剛 rt ^tweet9mH |T1 
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reviewing requirements 





Take another look at the requirements on the previous page. How do you think you 
can accomplish this using HTML5? Remember, one requirement is making sure 
your site works across as many device formats and sizes as possible? 

Check all the possibilities below (and then circle the best answer): 

Just use Flash, it works on most browsers. 

Take a look at HTML5 and see if there are any new technologies that 
might help (hint: there might be one named canvas). 


Write a custom application for every device, that way you know the 
exact experience you’re going to get. 

Just compute the image on the server side and deliver a custom 
image back to the browser. 


tKereiare nQ o 

Dumb Qu©sti9ns 


Well seriously, why not Flash, ora custom 
application for that matter? 

Flash is a great technology, and you certainly could use 
it. Right now, though, the industry is heading toward HTML5, 
and as we write this, you’d have trouble running your Flash 
app on all devices, including some very popular ones. 

An app may be a great choice if you really need an 
experience that is totally customized to the device. Keep in 
mind that developing a custom application for a variety of 
devices is expensive. 

With HTML5 you get great support across mobile devices and 
the desktop, and you can often create an application by using 
a single technology solution. 


I like the idea of creating the image on the server. 
That way I can write one piece of code and images work 
on all devices. I know a little PHP so I should be able to 
pull this off. 

That’s another way you could go, but the disadvantages 
are that if you have a zillion users, you are going to have 
to worry about scaling those servers to meet the demand 
(versus each user’s client dealing with generating the 
preview of the t-shirt). You’re also going to have a much more 
interactive and seamless experience if you write it for the 
browser instead. 

How? Well, we’re glad you asked... 
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bringing out your inner artist 


Lefs drop iw ow the TweetShirt crew... 

You've heard the requirements and you’ve got a basic design for 
the user experience, so now comes the tough part, making it work. 
Let’s listen in and see where this is all going... 

Joe: I thought this was going to be simple until I saw those circles in the 
background. 

Frank: What do you mean, that’s just an image... 

Judy: No no, the founder wants those circles to be random; so the circles on 
my shirt will be different from yours. Same with the squares. 

Frank: That’s okay, in the past we’ve done it by generating an image on the 
server side. 

Joe: Yeah, I know, but that didn’t work out so well; remember having to pay all 
those server fees to Amazon? 

Frank: Uh, yeah. Nevermind. 

Joe: And in any case, we want this thing to be instant gratification, you know, 
no long trips back to the server. So, let’s do it all on the client-side if we can. 

Judy: Guys, I think we can, I’ve been looking at the canvas stuff in HTML5. 

Frank: Canvas? Remember I’m just the design guy, fill me in. 

Judy: You must have heard of the canvas, Frank — it’s a new element in 
HTML5 that creates an drawable region for 2D shapes, text and bitmap 
images. 

Frank: It sounds like an <img> tag. We just place it on the page with a width 
and height and the browser does the rest. 

Judy: Not a bad comparison, we do define a width and height for the canvas, 
but in this case what gets drawn on the canvas is specified with JavaScript code. 

Joe: Well, where does markup come into that? Gan we tell the canvas in 
JavaScript to “put this <hl> element here ”？ 

Judy: Nope, after you place the canvas in the page you leave the markup world 
behind; in JavaScript we’re placing points, lines, paths, images and text. It’s 
really a low level API. 

Joe: Well, as long as it can pull off those random circles I’m good. Okay, 
enough talking, let’s have a look at it! 



L f va^k, v)ud7 a^d Ooc 
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adding a canvas to your page 


How to get a canvas into your web page 


Frank was right, in some ways a canvas is like an <img> element.You 
add a canvas like this: 


Tiic 匕 arwas ele 你 errt is a 
v\or^a\ HTML element 

i\\ai stav-b a 灼 

<d3^vas> 


TW width atbribirte dc-pihcs 
hoy/ rwahy hoHzjOhtal pixels it 
o^^upics ih a web pa^e- 



Likcy/isc, i\\t 七 dc-f mcs 

i\^t vertical av-ca pay i 七 

o^dufics, \icvc 2-00 fi^cls. 



<canvas id="lookwhatIdrew" width="600" height="200"X/canvas> 

l/Vfe vc added dh id so y/e 
Qh idchti-py -the Uhvas, 
you'll see how -to use this 
\v\ 3 bit-.. 


Hcv-c *tV^c y/'»d*t^ is set 
七 o ^>00 pixels y/'idc- 


f[v\A *UievVs tiie 
tlos'm^ *ta5* 


And the browser allocates some space in the page for the canvas, with the width 

and height you specified. KT ■ •, r* 

\v\ i\\\s ddse, d y/idtii o\ 

i>00 ^y\A a <Jc 2-00. 


Hcvc^s *tiic *tof, lc-f*t 
position of 
ddnvas. Wlc’ll use tKis 
pom*t *to mc3su\rc 
cvc\ry*t^»^5 else m 
ddnvas (as you II see 
•m a Wt). 


The CBv\y/Bs 
has a bit o( 

spate avou 灼 d 

it - 七 hat’s 

the dc-Paul-t 

rwav-gih o( 

七 he body 
clcrwc^t 



Look What 1 Drew 


◄ ► + 

0 http://localhost/-Beth/HTML5/TweetShirt/index.htr C Google 

) 



This is 七 he CByw/Bs y/idih ( 厶 00). 


丁 his is 七 he dar^vas 七 
(2-00 m ouv tasc)- 





V 0 ^ everyday WT/WL dah 

•flow a^o^d the cavw/as. 

丁 he ^ahvas is jus-t like a^y 
clcmch-t (like 
i^age, tit.). 
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bringing out your inner artist 


Test drive your new canvas 琢 

Time for you to get this working in your own web page. Go ahead and 
type in the code below into a new file and then load it in your browser: 


<!doctype html> 

<html lang= M en M > 

<head> 

<title>Look What I Drew</title> 

<meta charset= n utf-8 M > 

</head> 

<body> 

〈canvas id="lookwhatldrew" width= M 600" height= M 200 M X/canvas> 


Type m 


</body> 

</html> 



VViiat s\\t sees … 


...a 灼 d 4a 七 you 
pvobably see boo\ 


l/Ve d\rcw these lihCS -to 
explaih how the ddhvas -fits 
•m a page, -Po\r illustvatioh 
purposes ohly. They av-ch't 
^ally (uhless you dv-dw 

them youvscl-p). 

Tu\rh -the page -to (\^d ou-t 



move- 
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adding css for your canvas 


How to see your canvas 

Unless you draw something in the canvas, you’re not going to see it. It is simply a space in 
the browser window for you to draw in. We’re going to draw in the canvas very soon, but 
for now, what we really want is evidence that the canvas is actually in our page. 


There is another way we can see the canvas... if we use CSS to style the 〈 canvas> 
element so we can see the border, we’ll be able to see it in the page. Let’s add a simple 
style that adds a 1 -pixel-wide black border to the canvas. 


<!doctype html> 
<html lang= M en n > 
<head> 


<title>Look What I Drew</title> 

- 一 Wc'vc added a style (or 七 k 

da^vas i\\ai jus-t a Ip% 
bld^k bovdev- or\ it, so v/c 
see i*t m pay. 


<meta charset= n utf-8 M > 
<style> 
canvas { 

border : lpx solid black; 

} 

</style> 

</head> 


<body> 

<canvas id="lookwhatIdrew n width= n 600 n height= n 200 M X/canvas> 


</body> 

</html> 



Mudh bettev-/ /Vow wc 
^ see the Uhvas. H 
"to do 

with it … 


« o o 

Look What 1 Drew 


1 ◄ 

— 

+ 

0 http://localhost/-Beth/HTML5/TweetShirt/index.ht C [ 0 ^ Google 
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bringing out your inner artist 


tJiereiare no ^ 

Dumb Questi9ns 


Can I only have one canvas per page? 

No, you can have as many as you like (or that the browser 
or your users can handle). Just give each a unique id and you can 
draw on each as a separate canvas. You’ll see how to use the 
canvas id in a moment. 

Is the canvas transparent? 

By default, yes, the canvas is transparent. You can draw in 
the canvas to fill it with colored pixels; you’ll see how to do that 
later in the chapter. 

If it’s transparent, that means I could position it on top 
of another element to, say, draw something over an image or 
anything else on the page, right? 

That’s right! That’s one of the cool things about canvas. It 
gives you the ability to add graphics anywhere on your page. 


Can I use CSS to set the width and height of the canvas 
instead of the width and height attributes on the element? 

You can, but it works a little differently from how you might 
expect. By default, a canvas element is 300px wide and 150px 
high. If you don’t specify the width and height attributes in the 
canvas tag, that’s what you get. If you then specify a size in CSS, 
say 600px by 200px, the 300 x 150 canvas is scaled to fit that 
size, and so is everything that’s drawn in the canvas. It’s just like 
scaling an image by specifying a new width and height that is 
larger or smaller than the real width and height of the image. If 
you scale it up, you’ll get some pixelation in the image, right? 

The same thing happens with the canvas. A 300px wide canvas 
that becomes 600px wide has the same number of pixels 
stretched into twice the size, so it’ll look kind of chunky. However, 
if you use the width and height attributes in the element, you’re 
setting the dimensions of the canvas to be bigger (or smaller) 
than 300 x 150 and everything drawn in that canvas will be drawn 
normally. So, we recommend specifying the width and height in 
the tag attributes, and not setting those properties in CSS unless 
you really mean to scale the canvas. 





You might have noticed that the canvas element didn’t have any content 
inside it. If you were to place text between the tags, what do you think the 
browser would do when the page is loaded? 
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drawing on a canvas 


Prawmg oh the Canvas 

Right now we’ve got a blank canvas staring us in the face. Rather 
than sit here with a case of JavaScript-writers-block, we’re just going 
to go for it and put a nice black-filled rectangle on our canvas. To 
do that we’ve got to decide where it goes and how big to make it. 
How about we put it at the location x=10 pixels and y=10 pixels and 
make it 100 pixels high and wide? Works for us. 



Now let’s check out some code that does this: 


Let's S*tav*t just ouv 

<!doctype html> 

<html lang= n en"> 

<head> 

<title>Look What I Drew</title> 

<meta charset= n utf-8" /> 

<style> 


Wt\\ keep ouv- CSS 
bo\rdc\r ih -Pov how. 



canvas { border : lpx solid black; 
</style> 

<script> 

window.onload = function() { 


rtcv-c s ouv onload cv-, 

start aktty the 

\s -fully loaded. 


var canvas = document.getElementByld( n tshirtCanvas n ); 


dmaw oh the 
we heed a v-c-Pcvchdc 
"to it. Lets use 

-to 

get it -Pv-om -the X) 0 /V\. 



var COntext = canvas.getContext("2d") ; 


context•fillRect(10, 10, 100, 100); 


These r>ur»»bcv-s av-c the %, y position 
o( the \rcdta^jlc ov\ 七 he ddrtvds. 




</script> 

</head> 


s 


IVeYe usmg -the Zd io draw a 

-Pilled ov\ -the da^was. 


And v/c^vc also go 七 *thc width 
and hei^vt (’m pixels). 

Also m-tcv-cstmj *tha*t a vcd*ta^jlc -Pill method 

doesn't *takc d -Pill 60I0V" … more oy\ that m d scC- 


<body> 

<canvas width= n 600" height= n 200" id= M tshirtCanvas n X/canvas> 


</body> 

</html> 


v/e 乙扣 ’ 七 ouv- dd^vas dement IVlcVc spc^i-fy'mj a ^a^vas is 
^>00 pixels v/ide Br\d 2.00 pixels \\\^\\, d^d has id o( u *tsiii\rtCa^vas w . 
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A little Canvas test drive ... 家 

Go ahead and type this code in (or grab it from http : // wickedlysmart. 
com/hfhtml5) and load it into your browser. Assuming you’re using a 
modern browser you should see something like we do: 


ouv* lOO % \00 

positioned 3*t \ 0 } \0 m da>rwas. 



A closer look at the code 

That was a great little test run, but let’s dive in a little deeper: 


o 


In our markup, we define a canvas and give it an id, using the < canvas 〉 tag. The first thing 
you need to do to draw into that canvas is to get a handle on the canvas object in the DOM. 
As usual we do this with the getElementByld method: 


var canvas = document. getElementByld ( T, tshirtCanvas n ); 
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reviewing how canvas code works 



With a reference to the canvas element assigned to the canvas variable, we now have to go 
through a bit of “protocol” before we draw on the canvas. We need to ask the canvas to give 
us a context to draw on. And in this case, we specifically want a 2D context. The context 
returned by the canvas is assigned to the context variable: 


var context = canvas.getContext( n 2d n ); 


TV^is is d bit o-f p\ro*totol have *to (oWo^i 
behove s*tav*t dbrav/nr^ o” ^a^vas. 


o 


Now, with the context in hand, we can use it to draw onto the canvas, which we do by calling 
the f illRect method. This method creates a rectangle starting at the x, y position of 10, 

10 and that is 100 pixels wide and high. 

Moie, wcVc dallmg -the -f illRcdt method or\ 

do 灼 no*t -the da^vas 


context.fillRect(10, 


10 , 


100 , 100 ); 

TVy this out ar)d you should see a 
bl 沘 k appear. Try 乩如少％ 

the values (or X, y ; width, and heigh-t 
see what hafpehs. 





Can you think of a way to use a canvas element if your 
browser supports it and if not, to just display a message 
like “Hey, you, yes you, upgrade your browser!!”？ 
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Dumb Questions 

How does the canvas know to make the 
rectangle black? 

Black is the default fill color for a canvas. 

Of course, you can change this using the fillStyle 
property, as we’ll show you shortly. 

What if I wanted a rectangle outline, not a 
filled rectangle? 

To get just the outline of a rectangle, you’d 
use the strokeRect function instead of fillRect. You’ll 
learn more about stroking later in the chapter. 

What is a 2d context, and why can’t I just 
draw right on the canvas? 

The canvas is the graphical area displayed in 
the web page. The context is an object associated 
with the canvas that defines a set of properties and 
methods you can use to draw on the canvas. You 
can even save the state of the context and then 
restore it later, which comes in handy at times. You'll 
see many of these context properties and methods 
in the rest of this chapter. 

The canvas was designed to support more than 
one interface; 2d, 3d, and others we haven’t even 
thought of yet. By using a context, we can work 
with different interfaces within the same element, 
canvas. You can't draw right on the canvas because 
you need to specify which interface you’re using by 
choosing a context. 

Does that mean there is a “3d” context 

too? 

Not yet. There are a few competing and 
emerging standards for this, but nothing that looks 
like a frontrunner yet. Stay tuned on this one; in the 
mean time take a look at WebGL and the libraries 
that use it, like SpiderGL, SceneJS and three.js. 



Wondering how you can detect whether your 
browser supports canvas or not, in code? 

Well of course you can, and we should point out 
that so far we’ve just been assuming our browser 
supports canvas. But in any production code you 
should test to make sure you have support. 

All you have to do is test to see if the getContext 
method exists in your canvas object (the one you 
get back from getElementByld): 

Filrs-t y/c g\rab a \rc-fc\rchdc -fco a tavw/as 
ih the 

var canvas = 

document. getElementByld ( 、 'tshirtCanvas"); 
if (canvas.getContext) { 

// you have canvas 
} else { 

// sorry no canvas API support 

>wc dhcdk -Pov- -the c%is*ta^dc o( 
ytC 。 灼七以七 method- No*tc> wcVc 朽。七 

i*t> v/cVc just i-P i*t 3 value- 

If you want to test for canvas support without 
having to have a canvas already in your markup, 
you can create a canvas element on the fly, using 
all the techniques you already know. Like this: 

var canvas = 

document. createElement (''canvas"); 

Be sure to check out the appendix for information 
about an open source library you can use to test for 
all the functionality in HTML5 in a consistent way. 
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canvas and internet explorer 



When I try this in Internet 
Explorer, I'm seeing nothing where 
the canvas element should be. 
Whafs the story? 


IE supports canvas only in versions 9 and 
later, so you should code your page to let 
your users know. 

Here’s the deal: if you really really need to support canvas 
functionality in Internet Explorer (again, pre-version 9 )， 
then you can check out the Explorer Canvas Project and 
other similar efforts as a way to use a plug-in to get this 
functionality. 

For now though, let’s just assume you’d like to let your 
users know they are missing out on your great canvas 
content. Let’s take a look at how to do this ... 


/Ud perhaps you surest 
七 hat they upgv-adc ix> IB^ 
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Failing gracefully 

So, the truth is, out there somewhere, in another place and time, a user is going to 
visit your site and not have support for the canvas element. Would you like to send 
them a kind message saying that they really should upgrade? Here’s how: 


^ Just everyday da^vas eUeht 

<canvas id= n awesomecontent n > 


Hey you, 
</canvas> 


yes YOU, 


upgrade your browser!! 



Pu 七 message you displayed 

•fco youv usev-s y/iio do 灼七 a 
^dr>vds-ddfdble bvoy/sev. 


How does this work? Well, any time a browser sees an element it doesn’t recognize 
it displays any text contained within it as a default behavior. So, when non-capable 
browsers see the <canvas> element, they just display “Hey you, yes YOU, upgrade 
your browser!!” Capable browsers, on the other hand, conveniently ignore any text 


between the canvas tags and so won’t display the text. 





Tlia^k you HTML^ 

gi\r|s) -pov 
你冰叫 this easy/ 


And, as you already know, another way to handle browsers that don’t support canvas 
is to use JavaScript to detect if the browser knows about the element. This gives you 
a bit more flexibility to give your users a different experience in case their browsers 
don’t support it; for instance, you could redirect them to a different page or display 
an image instead. 
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reviewing the implementation plan 


Now that we know how to 
make rectangles, we can use that 
to make squares on the canvas, right? 
We need to figure out how to get them 
randomly placed on the t-shirt, and in 
the user-chosen color. 


Frank: Sure, but also we need the user interface for the user 
to specify all this. I mean we’ve got the mock-up, but we need 
to implement it. 

Judy: You’re right Frank. Not much point in going further 
without the interface. 

Joe: Isn’t that just HTML? 

Frank: Yeah, I guess so. But, given we’re trying to do this 
all on the client-side, how is this going to work? For instance, 
where does the form get submitted? I’m just not sure I 
understand how this all fits together. 


Joe ： Frank, we can just call a JavaScript function when the 
user clicks the preview button, and then we can display the 
shirt design in the canvas. 



Frank: That makes sense, but how do we access the values 
in the form if it is all client side? 


Judy: The same way we always access the DOM; we can use 
document. getElementByld to grab the form values. 
You’ve done that before. 


Frank: You guys lost me way back. 

Joe: That’s okay, let’s step through this together. We’ll start 
with the big picture. 
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TwcetShirt: the Pig Picture 

Before we jump into a big implementation job, let’s step back and look at the 
big picture. We’re going to build this web app out of a canvas element along 
with some form elements that act as the user interface, and behind the scenes 
we’re going to make everything happen with JavaScript and the canvas API. 

Here’s what it looks like: 


will do the heavy 
li-Pti^g o( getting the usev- 
•… put the -Pov-m ahd 

dyaw'mj with the dahvas API- 




The f\rcvicw button v/ill 
invoke JavaSdv-ift do 

i*ts -thmg the 

*t—shiirt fv-eview- 


o 你 HTML wai d tw 

ada S—e W 


tV>c was 


MOO 

+ f ^ http:/1tweetshirt.com/ 


TwcctShirt 



5»0l0ct bac^rouNd cx^lor ： [whrtepl ^ iVc II use JavaSd 

*t© dv-a>/ ta^was 

GrcteS or 沖 are $? 【。•峨 m U 

S0l@ct t&ct color ： [ Black/7) 毛 - sW 七 . 


This is the 

-Po\r the 

"t—shiv-t desi^h. 




Rck 3 tw00t* l 縱 arbuzzeeo yjuV^oia 剛 rt #tweet9r»H 

， LFVwiewl ^ 




rteves USCV 少 c ， 

clcwcv\t- 



/Vt some Po*m*t v/cVc ^o'm^ to v>ccd some scv-vcv-sidc 
su^oV't -rov edommevde 3v>d *t—siiivts ； ,bu 七 

cy, y/c ^avc -to leave some y/ov-k -fov youv- siav-t-uf. 
)o^-t (oryi bo ser^d us d (rtt A (o^dts 


V ^ 

slaves v/ould be CVCir> bc*t*tcV". 
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BE th^ Bi 瓣總 - 

Below, you’ll find tire form for tire t-shiPt 
interface. Your job is to play like you’re Ae 
browser and to render tire interface. After you’re 

done, compare your interface to tire 
one on tire previous pa^e to See if 
you did it correctly. 


<form> 


<P> 

<label for= M backgroundColor M >Select background color : </label> 
<select id= n backgroundColor n > 

〈option value="white M selected= n selected">White</option> 
<option value= n black n >Black</option> 

</select> 

</p> 

<P> 

<label for= n shape n >Circles or squares?</label> 

<select id= n shape’▼> 

〈option value= n none n selected= n selected">Neither</option> 
<option value= n circles ’▼ >Circles</option> 

<option value= n squares n >Squares</option> 

</select> 

</p> 

<p> 

<label for= n foregroundColor M >Select text color : </label> 
<select id= n foregroundColor M > 

〈option value= n black M selected="selected">Black</option> 
〈option value="white n >White</option> 

</select> 

</p> 

<P> 

<label for= n tweets n >Pick a tweet : </label> 

<select id= n tweets n > 

</select> 

</p> 

<p> 

<input type="button" id="previewButton" value= n Preview"> 

</p> 

</form> 
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youv hcv-c. 

Pv-aw the web pajc as it will 
look v/i*th the *fo\rm clcw\C^*ts 

OY\ the Ic-ft 



var selectObj = 
var index = selectObj.selectedlndex; 
var bgColor = selectObj[index].value; 



Assume you^vc used the 

*to pi 匕 k the 

values -fov youv 


BE •總， 

Now tiiat you have an interface, 
execute these JavaScript statements 
and write in tiie value for each 
interface element. 

Ched your answer 
witii our solution at 
tire end of tire chapter. 


document.getElementByld("backgroundColor"); 


var selectObj = document.getElementByld("shape"); 
var index = selectObj.selectedlndex; 
var shape = selectObj[index].value; 


var selectObj = document•getElementByld( n foregroundColor n >; 
var index = selectObj.selectedlndex; 
var fgColor = selectObj[index].value; 


you are here ► 


299 
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First lefs get the HTML iw place 


Enough talk! Let’s build this thing. Before we do anything else, we just need 
a simple HTML page. Update your index. html file so it looks like this: 


A r.-.dc _ 以 - 
domplia^t -f ile ； 


<!doctype html> 

<html lang="en M > 

<head> 

<title>TweetShirt</title> 
<meta charset= n utf-8 n /> 


^ wc the 

title to u TwcciShiv-t w 


<style> 

canvas {border : lpx solid black;} 
</style> 

<script src=" tweetshirt. js n X/script> 
</head> 



Lc-t's all ouv JavaSoft 

CoAt m d strait V»lc SO it S 

a |*rb*tlc easier -to 




<body> 

<hl>TweetShirt</hl> 

〈canvas width:，▼ 600 n height="200" id="tshirtCanvas M > 

<p>Please upgrade your browser to use TweetShirt!</p> 
</canvas> 


Hcv-c s tarwas! 


<form> 


\ 


</form> 

</body> 

</html> 


*tW»s *»s tKc *tKat v/iH Viold all 
Co^broU *tKc *U«*tsWirt a 代 
iA/c II yi -to -tKis Oh -tKc 心 七阿 … 


v/c^vc lc*f 七 

a message 

-fov- usev-s oy\ old 
bv-owsev-s. 






What else do you need to know to replace the CSS border on your canvas 
with a border drawn on the canvas using JavaScript? And, if you could, which 
method would you prefer (CSS versus JavaScript), and why? 
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Now, Icfs add the <form> 


Okay, let’s now add the user interface so we can start writing some code to create t-shirts. 
You’ve seen this code before, but we added some annotations just to make everything clear; 
as you type in the code, make sure you check out our annotations: 


All "this todt Joes ih between the <-foVrn> 
/ 七 吵 you set up oh the p\rcvious pay. 


<form> 

<P> 

<label for="backgroundColor M >Select background color : </label> 

<select id="backgroundColor M > 

<option value= n white" selected="selected">White</option> 

〈option value="black">Black</option> ^ 

〈 /select 〉 Hcvcs y/\icv-c usev* sclct*ts to ov 

</ P > ^ - u IKc Wet swt Ats\^ TKc cMo\us arc kladk 

<P> ov- y/W»lc. Feci add your oy/^ Colors. 

<label for= n shape n >Circles or squares?</label> 

<select id= n shape"> 

<option value= n none n selected= n selected">Neither</option> 


<option value="circles ▼▼ >Circles</option> 
<option value= n squares M >Squares</option> 
</select> 


</p> 

<P> 


， ^ usihg 3 ho-thc\r sclcdioy> 60 士。 | 

7 ^hoosihg ^i^lcs oir s^u 3 \rcs -fco 

ihe d«i 9h . The usev also 
仆 oosc heitheir (wkh should result 
a plam b 把 kyouhd). 


<label for= M foregroundColor">Select text color : </label> 

<select id= n foregroundColor n > 

<option value="black n selected= n selected">Black</option> 

〈option value="white M >White</option> sclctt»oy\ -fov dV^oosm^ 

</select> 


</p> 

<P> 


七 he toW *be 此 M am ， 

jus 七 klatk ov ▲ 心 . 


<label for= n tweets n >Pick a tweet : </label> 

<select id="tweets"> ) all ihc Wets 30. So why^s \i Ah, well be -Pillma 

〈 /select 〉 」 ^ detail la-tcv (hmi ： v/c r>ccd io -them live -fvom Tv/ittcv-, 

</P> a-r-tev- all -this is a web app, viahi?/). 

<P> 

<input type="button" id= n previewButton n value= M Preview"> 

</p> 

/ |-p youVc used *bo -povms, you r\o\j\ttA "Oia 七 

•this -Pov-m Aotsv^i have ad*tio^ attvibu 七 e (whidh 

-the button wor/ 七 do *t s 匕 linked). 

WlcVc 3 o| 〜 *to handle dll 七 1 ^七 in jus*t S bi 七 … 


last, a WUo" *to ?^v'icv/ *b^c sWl 
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adding the javascript 


Time to get computational with JavaScript 

Markup is great, but it’s the JavaScript that brings the TweetShirt web application together. We’re 
going to put some code into tweet shirt. j s. Right now, we want to take the baby step of just 
putting random squares on the shirt. But before we even get to that, we need to enable our preview 
button, so it calls a JavaScript function when you click it. 


Cvca*tc a *t>wcc*bhiv*t.js 
div\d ddd 七 his. 


Start by 

pv-cv'icv/Bu*t*boy\ 


pv-cv»c 



window.onload = function() { 

var button = document.getElementByld("previewButton"); 
button.onclick = previewHandler; 

f 

a cWcV iW.s so 从 at 弋广 

\i *,s c\\tVtd (or "touAcd cm a mobile dcvitcA the 
-Puy\£.*t'ioy\ pv-cv'icy/ttay\dlcv- is 乙 ailed. 

So now when the preview button is clicked, the previewHandler function is going to be 
called, and that’s our chance to update the canvas to represent the shirt the user is designing. 

Let’s begin writing previewHandler: ,, ,, 

6 8 giari by tVic 

function previewHandler () { jj/. ( Q]r ^ 2-d 

var canvas = document.getElementByld (’ ▼tshirtCanvas n ); 


var context = canvas.getContext("2d"); 

var selectObj = document.getElementByld("shape n ) 
var index = selectObj.selectedlndex; 
var shape = selectObj[index].value; I’’ 



see ^ 7- 

cMost 

TliCh y/c -f ihd out whidh 1 七 ^»> is selected 
(spires o\r by gcUmg the ihdex 

o*i "tKc i 七 ( 你 ， dhd dssi^hih^ r^s 

value -to the Variable shape. 


if (shape == "squares") { 

for (var squares = 0; squares < 20; squares++) { 

drawsquare (canvas, context) ; M ^ value sV,a ? e *，s 

、 'uaves”, v/c ^cd*to drav/ some 

slaves, ttov/ abou*t 2-0 <Jc 

? d :7 伽“〜 d^awS.ua^ whidh weVe 

Wite. Uohu i^ai weVe passing both the WAd the 

^ /cull see i, a bit how we r,ake use o( those 



302 


Chapter 7 



bringing out your inner artist 



Dumb Quest! 


9ns 


How does the selectedlndex work? 

The selectedlndex property of a selection form control returns 
the number of the option you have chosen from the pulldown menu. 
Every list of options is turned into an array and each option is in the 
array in order. So, say you have an selection list with these options: 
“pizza”, “doughnut”, “granola bar”. If you selected “doughnut”, the 
selectedlndex would be 1 (remember, JavaScript arrays start at 0). 


Now, you probably don’t want just the index; you want the value 
of the option at that index (in our case, “doughnut”). To get the 
value of the option, you first use the index to get the element of the 
array; this returns an option object. To get the value of that object, 
you use the value property, which returns the string in the value 
attribute of the option. 



Pseudo-code Magnets 


Use your pseudo-magical coding powers to arrange the pseudo code below. We need to write the 
pseudo-code for the drawSquare function. This function takes a canvas and context and draws one 
randomly sized square on the canvas. Check your answer at the end of the chapter before you go on. 




Wc did ih\s OhC -Po\r you. 


function drawSquare 


context I ){ 





厂 canvas J 


draw a square at position x, 
y with width w 


calculate a random y position for the 
square inside the canvas 


calculate a random width 
for the square 


’’li^vtblue” is tolov o( 
slaves oy\ ouv dcsi^r> tomf. 



calculate a. random x position 

square inside the canvas 


for the 
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implementing the squares 


Writing the drawSquare fuwctiow 

Now that you’ve done all the hard work of figuring out the pseudo-code, 
let’s use what we already know to write drawSquare: 


Wtrts ouv- V^as buo 

ddy\vds ar\d 乙 


function drawSquare(canvas, context) 
"var w = Math.floor(Math.random() 


wc y\ttA 

a random 

^Y\d Y position 
-fo\r 

square- 



40); 


var x = Math.floor(Math.random() * canvas.width); 


var y = Math.floor(Math.random() * canvas.height); 


context.fillstyle = "lightblue 
context.fillRect(x, y, w, w); 


n • 
r 



^ hd wc dv^aw -the 

artual s^uamc with 七 . 


iVe \re usmg A1a*th.v*ahdorw0 -fco dveate \rdhdom 
humbc\rs 4 \r the width 3 hd the >c ; y fosit.oh o( the 
s'ua\re. Mo\rc oh this \y\ a moment... 

\Mt (Most ^0 as h\t latest square 
sizjC so i\\t s<\ua\rcs Aor!i *too b'15. 

丁 he X f y ^oo\rdihates av-c 
based Oh the Width ahd 
height <^P the dahvas. I/Ve 
dhoosc S \rdhdorvt hur^bcV" 
bctwcch O ahd the width 
height respectively. 

\MtYt *to make 七 he s^u3v*cs B rude 
1 吵七 blue usrng i\\t -PillSiylc method, v/c II 
look d 七七 his method move closely nr> S sd. 

V_ Head HTML 

4 r>“ ccd a 


How did we figure out what numbers to multiply each Math. random value by to get our 
square width and x, y position? In the case of the width of the rectangle, we chose 40 
because it’s a nice small size with respect to the canvas size. Because this is a square, we used 
the same value for the height. And, we chose the width and height of the canvas as the basis 
for choosing x and y values so our square stays within the boundaries of the canvas. 


Feel -fvee *fco sfcd'i-fy 
value o*thcv* 


a 


m 


youv 


ovm 


todt^ 


Thc ^'dih o-P £hc 


^5hvas. 




T\r)c y doov-dmatc 
is -fo\r 

tomcv" *tV)C s<\uav-c. 







The y/'idi*t^ air\d 
iicijivt of tiic 
s<^uav-c (v-cmcw'bcv") 
ov\ d s<\ua\rc> *t^osc 
values art same)- 




> 


TV^c ㈣ 认 d 


J 
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Time for a test drive ! 冢 

Okay, after all that typing, let’s give all this code a test 
run. Go ahead and open your TweetShirt index. html 
file in your browser. Press preview and you should see 
random blue squares. 

Here’s what we see: 


Wi 以 thats lust the 

look v/C 


« o o 


TweetShirt 



Uh, wait a sec, if you keep 
pressing the preview button 
you get a LOT of squares. 
Thafs not right! 


O 



He’s v-ijlvt, v/c^vc 
30 七 a slijhi problem. 
Press youv- p\rcvicw 
bui-fco^ a o( 
•times and youll see 
sorwethmg like "this. 



J9H|^V^Tw«:clShir l^ 

<■ C fi 

O localhost/ 〜 Beth/Head-First-HTML... ☆ 

^ a 6 ^ 


Select background color: white 
Circles or squares? squares : ) 
Select text color: [ mack 
Pick a tweet: 


f Preview 〕 

_ A 
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fixing the squares code 


Why are wc seeing the old squares and 
the new squares whew wc preview? 


This is actually kind of a cool effect... but it’s not what we 
wanted. We want the new squares to replace the old squares each 
time we press preview (just like we’ll also want the new tweet to 
replace the old tweet when we get the tweets working, too). 

The key here is to remember that we’re painting pixels on the 
canvas. When you press preview, you’re getting the canvas and 
drawing squares on it. Whatever is already on the canvas just 
gets painted right over with the new pixels! 


But no worries. You already know everything you need to know 
to fix this right now. Here’s what we’re going to do: 



Select text color buu 


A 


Pick a tweet: 


J 


① Get the selected background color from the 
M backgroundColor ,/ select object. 

② Fill the background color of the canvas using 
fill Style and fillRect, each time before we 
start drawing squares. 


^Iiarpen your pencil 


To make sure we see only new squares in the canvas each time we 
click preview, we need to fill the background of the canvas with the 
background color the user has selected from the "backgroundColor” 
select menu. First, let’s implement a function to fill the canvas with 
that color. Fill in the blanks below to complete the code. Check your 
answer with our solution at the end of the chapter before you go on. 


function fillBackgroundColor(canvas, context) { 


var selectObj = document.getElementByld( n _ 

var index = selectObj.selectedlndex; 

var bgColor = selectObj.options[index].value; 

context.fillStyle = _; 

context•fillRect(0, 0, _, _ 



七 : you out 
stkcitd option Will be a 
co\or vou use just like 70U 
usc d w l\^tbluc ^ U slaves. 


- ' ft’m 七： v/e bo -fill 

j iVttOLE ^d)r\VdS W\{\\ 60I0V’ 
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bringing out your inner artist 


Add the call to fillPackgrouwdColor 

You have the f illBackgroundColor function ready to go; now we just need 
to make sure we call it from previewHandler. We’re going to add that as the 
very first thing we do so we get a nice, clean background before we start adding 
anything else to the canvas. 


function previewHandler() { 

var canvas = document.getElementById (’ ▼tshirtCanvas n ); 


var context = canvas.getContext("2d M ); 
fillBackgroundColor(canvas, context); 

var selectObj = document.getElementByld("shape") 
var index = selectObj.selectedlndex; 
var shape = selectObj[index].value; 


WlcVc add»^5 dall 

-fillBadkyourxlColoy bc-fovc y/c dva 如 
ouv* slaves so i*t d.ovcv-s uf 七 he 
^vcvious dbraWm% ^ives us S dlca 的 
bddk^vour\d -fo\r ou\r dv-aWm^. 


if (shape == "squares") { 

for (var squares = 0; squares < 20; squares++) 
drawSquare(canvas, context); 


« n n 


TwcctShirt 


Another quick test drive to make sure our 
new fill^ackgroundColor function works... 

Add the new code to your tweetshirt. j s file, reload your 
browser, select a background color, select squares, and click 
preview. Click it again. This time you should see only new 
squares each time you preview. 





Count the squares in a few different previews. Do 
you ever see less than 20 squares? You might. 

Why would this happen? What could you do to fix 
this problem? (After all, you don’t want customers 
cheated out of their 20 squares, do you?) 




__G 舟 G_ localhost/~Beth/Head-FirsNHTl 


i . ' ☆ 坧缶 ■矽 


Select background color: 


White 


Circles or squares? ; 
Sdeu text u)lo 「buck 了 ) 
Pick; a tweet: T> 

Preview 


Kow wc only 
s^uav-cs -fov- pv-eview. 
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reviewing fill sty/e 



Ajava^crl]>t Cl^seUp 

Let’s take a closer look at f illStyle since this is the first time you’ve seen it. f illStyle 
is a property of the context that holds the color for any drawing you do to the canvas. 


Just V.ke 値此 

*,s somctWm^ ^ 


But Unlike fillRctt filis-tylc is a 
pvopcv*ty> r>o*t a method- So VJC 
sc*t i*t> v^a^cv 七 ha” dall i*t. 

1 

context.fillStyle = 


rnc same Moy ^oirmats you use m CSS. So you 

H uT ； i kc ㈠ 亂 w values like 
齐 tttcM or irgbto, Hl t 23，). TVy _ 七 / 

"lightblue"; 


Kotc 七七 Unlike m CSS) you mus 七 
pu 七 <\iAO*tcs av"ouor\d *bV^c value i-f 


there^ctre no 。 

Dumb Questi 9 ns 


I was expecting we’d set the 
background color of the squares and 
the canvas by passing in a color value 
to fillRect. I don’t really get how fillStyle 
works. How does it affect what fillRect 
does? 

Great question. This is a little different 
from how you might be used to thinking of 
things. Remember, the context is an object 
that controls access to the canvas. What 
you’re doing with fillStyle and fillRect is 
first setting a property that tells the canvas, 
“Whatever you draw next should be in this 
color". So anything you fill with color (like 
with fillRect) after setting the fillStyle will use 
that color, until you change the color again by 
setting fillStyle to a different color. 


Why does the color need quotes 
around it, when the property values in CSS 
don’t? I don’t use quotes when I’m setting 
the background-color of an element, for 
instance. 

Well, CSS is a different language from 
JavaScript, and CSS doesn’t expect quotes. 
But if you don’t use quotes around the color, 
JavaScript will think that the color name is a 
variable instead of a string, and will try to use 
the value of the variable for the color. 

Say you have a variable 
fgColor = "black". You could write 
context.fillstyle = fgColor, 
and it would work because the value of 
fgColor is “black”. 

But context.fillstyle = black 

won’t work because black isn’t a variable 
(unless you set it up that way, which might be 
a bit confusing). You'll know you’ve made this 
mistake because you'll get a JavaScript error 
that says something like “Can’t find variable: 
black”. (Don’t worry, we all make that mistake 
at least once.) 


Okay, I give up. Why were we seeing 
less than 20 squares sometimes? 

A- 

The x, y and width of the squares are 
all random. Some squares might obscure 
other squares. A square might have an x, y 
position of 599,199 so you’d only be able to 
see one pixel of that square (because the rest 
of the square would be off the canvas). Some 
squares might be 1 pixel wide, and some 
squares might even be 0 pixels wide because 
the Math.random method can return 0. Or you 
might generate two squares of exactly the 
same size and location. 

But for this application it's all part of the 
randomness, so we think it’s fine. For another 
application we might need to ensure this 
doesn’t happen. 
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bringing out your inner artist 


Meanwhile back at TweetShirt.com... 



Not bad, you know this is 
already starting to look 
like the boss's design. 


Jim: I know, and I’m impressed with how little code 
this took. Just think if we did this the old, server-side 
way, we’d still be getting our server up. 

Frank: And it seems like we’re in a good position to 
knock out the circles in the design too; after all, they 
are just like the squares. 

Jim: I agree, where’s Judy? She probably knows the 
API for the circles already. Then again, it’s probably 
just a matter of calling the f illCircle method. 

Frank: Sounds right to me! Who needs Judy, we’ve 
got this! 
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introducing paths and arcs 


Ami, a couple of hours later 



Frank: I don’t know what’s going on, I’ve double checked everything, but, no 
matter what I do, when I call fillCircle, I get nothing on the canvas. 

Judy: Well, show me your f illCircle method. 

Frank: What do you mean by my method? I don’t have one, I’m using the 
method in the canvas’s API directly. 

Judy: The canvas API doesn’t have a f illCircle method. 

Frank: Er, I assumed it did because we have a f illRect... 

Judy: Yeah, well you know what that ass-u-me stuff gets us. Gome on, pull up a 
browser — you can always find the API at: 
http :/ /dev.w3.org/html5/2dcontext/. 

...Anyway, drawing a circle is a little more complex than calling a single method. 
You need to learn about paths and arcs first. 

Jim, entering: Judy, did Frank tell you about how we nailed the circle? 

Frank: Uh yeah, Jim, enoughway ithway ethay irclecay! 



scv-v*itcs fijlatmbavc-t-ta dom. 
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bringing out your inner artist 


Prawiwg with &eeks 

Before digging into circles, we need to talk about paths 
and arcs. Let’s start with paths, and draw some triangles. 

If we want to draw a triangle on the canvas, there’s no 
fillTriangle method, but we can create a triangle 
anyway by first creating a path in the shape of a triangle, 
and then stroking over it to draw a triangle on the canvas. 

What does that mean? Well, say you wanted to be really 
careful drawing on the canvas, you might take a pencil and 
trace a light shape (let’s just call it a path) on the canvas. 
You trace it so lightly that only you can see it. Then, after 
you’re satisfied with your path, you take a pen (with a 
thickness and color of your choosing) and you use that to 
stroke over the path so everyone can see your triangle (or 
whatever shape you traced with the pencil). 

That’s just how drawing arbitary shapes with lines works on 
the canvas. Let’s draw a triangle and see how this works: 



Wc use mcihod *to *tcll 

day>vas v/cVc a mv/ 


The peWiI 七 ha 七 




context.beginPath(); 
context.moveTo(100, 150); 



Wlc use movefo method 

*fco move *to a 

spcd'i-fid oy \ 七 he d3v>vas. 
You -the as 

fu 七 dovm 3 七 fom 七 . 





The ImcTo method *bv*ac.cs d 
jrv-om tu\r\rcn*t lo^at»or\ *to 

ay\o*t^cv- po'm*t oy \ *t^c ta^vas. 


context.lineTo(250 , 75); 


TV^C pci'll y/as at IOO, 1^0, a^d \\trt 
y/cVc C%*tcir\di'm5 *fv-om *b^CV"C 

■to 



Pvav/ d Ime -fv-om 七 he 
^ fom 七 *to 七 his 

Y\t^ 2-^0, 1^- 
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how to draw with paths 


We 

two 


、 3 。七七 he -f*ivs*t side o( *tV>c 
o move. Lets use Imclo a^a'm -fov 


灼 ov/ v/c 灼 ccd 

scCoy\A s*idc ： 


context.lineTo(125, 30); 


略 ㈤: 士， 

’ y 一 30. That Completes OUV^ s^ohd lihe. 

1/VcVc almost pc\rc/ All WC 於 cd do ⑽ w is i^rau OhC 
⑽代 Ime fmish 七 k 卜 iah 3 le.do thai weVe \usl 

9 om 9 ^ ^losc the path with the doscPalh method- 



Tvadc ar>o*tKcv- 
l*mc -fvom 七 he 
pvcvious pom 七 *to 
12^0. 


context.closePath(); 






The dosc?ai\) 你 rthod 幻喊也七 he 〆 

fom-t o-P the path (100, 1^0) -to -the last 
poiht ih the ^uV-VCht path (IZ^, ZO). 


Thcv-c ； s ouv -tvia^^lc! 
Bu 七 vemembev, *l*t IS 
still OY\ ly a fa 七 h, s 。 
•rt’s y\o{, visible *to *tiic 
usev ； yei- 


So you have a path! Now what? 


E3Cl0f(ClS6 Vou use the path to draw lines and fill in your shape with color, of course! Go ahead and create a 

simple HTML5 page with a canvas element and type in all the code so far. Give it a test run, too. 


context.beginPath(); 
context.moveTo(100, 150); 
context.lineTo(250, 75); 
context•lineTo(125, 30); 
context.closePath(); J 

context.lineWidth = 5; 
context.stroke(); 
context.fillStyle = "red"; 

context.fill(); . 

some y\t^ Codt- diiCdd 3i^d ar>y>o*t3*tc "tVis 
vy*,-tv> y/ha*t you 七 Wk 1 七 docs. Load 七 he fay. Wtrt you 
Chctk youv ay>s>wcv-s a*t tv\d o( *tV>c tKapicv-- 


ttcv-c^s *tKc toAt so -fav*. 
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bringing out your inner artist 


O 


Just to keep us on track here, 

I thought we were trying to draw 
circles? What does all this path stuff 
have to do with drawing circles? 


To create a circle，we first create a path. 

We’re about to show you how to trace a circle as a path. And, 
once you know how to do that, you can make any kind of 
circle you like. 

Here’s a bit more detail for you. You know how to start a path, 
right? Like we’ve been doing, you use this code: 

context.beginPath(); 

Now，what we haven’t told you yet is there is another method 
in the context object named arc: 


context•arc(150, 150, 50, 0,2* Math.PI, true); 


What does that do? Ah, we’ll spend the next page or so 
finding out the details. But, as you might expect, it traces a 
path along a circle. 


po >/ou *to 

tlass 

d 6»V*dlc ^ 

Just 

ba6k 

-fov 3 sc 乙 … 
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looking at the arc method 


breaking down the arc method 

Let’s dive right into the arc method and check out its parameters. 

context•arc(x, y, radius, startAngle, endAngle, direction) 

The whole point of the arc method is to specify how we want to trace a path along a circle. 
Let’s see how each parameter contributes to that: 




radius This parameter is used to specify 
1/2 the width of the circle. 
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bringing out your inner artist 


direction determines if we are creating the arc path in 

a counterclockwise or clockwise direction. If 
direction is true, we go counterclockwise; if 
it’s false, we go clockwise. 


*tvuc 



|jf is tv-uc, v/C 

bract ard —A 

is -false *bv-a6c 
6 lo 6 kW»sc. 


startAngle 

f 

endAngle 

f 


direction) 



Important Point Below! 


StartAngle A endAngle The start angle and 

end angle of the arc 

determine where your-- - 

arc path starts and stops 



Don’t skip this. Angles can be measured 
in the negative direction (counterclockwise 
from the x-axis) or in the positive direction 
(clockwise from the x-axis). This is not the 
same as the direction parameter for the arc 
path! (You’ll see on the next page.) 


a^le measuved 30'm ； 

AouvrKgvdo 乙 kv/ise f\rom 



a%is is 

Like 一奶 dcjv-ccs. 



J\y\ mcasuv-cd jo'mj 
do^kv/isc -fv-om 七 
乂一 a%is is posifeve. Like 
午弓 dcjv-ccs. 
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getting experience with arc 


A little taste of using the arc 


What we need right now is a good example. Let’s say that you want to trace an arc 
over a circle that is centered at x= 100, and y= 100 and you want the circle to be 
150 pixels wide (or, a radius of 75). And, the path you want to trace is just 1/4 of 
the circle, like this: 



TV>c div*cd*tioir> >wcVc 

avd is dour>*tcv-dIodk>w'isc• 


TKis is ou\r av-t 


The sta\rt is O 0 a^d 
the tv\d a^ale is ZlO°. 


The v-adius is 7^. 


Noiidc v/cVc mcasu\r*mg ihc 

dlodkv/ise 

•P'rorw ihc 乂一 a 乂 is, so ihc 
cr>d is posi-tivc. 


The ^Chtcv -： 
y^-lOO, y:lOO 


Vum, a\>plc p»c! 


Now let’s create an arc method call that traces this path: 


o We start with the x, y point of the center of the circle: 100, 100. 


context.arc(100, 100, 


r _ f 



Next, we need the radius of the circle, 75. 

context.arc(100, 100, 75, , 




o 


Q 


What about our start and end angles? Well, the start angle is 0 because the starting point 
is at 0 degrees from the x axis. The end angle is the angle between the x-axis and the 
stopping point of our arc. Since our arc is a 90 degree arc, our end angle is 270 degrees 
(90+270 = 360). (Note that if we’d measured in the negative, or counterclockwise 
direction instead, our end angle would be -90 degrees.) 

context.arc(100, 100, 75, 0, degreesToRadians(270), _); 

Finally, we’re tracing the arc in a counterclockwise direction, so we use true. 

context.arc(100, 100, 75, 0, degreesToRadians(270), true); 



Wic’ll con\t batk 
*to m 3 set- 


I 七 jus 七 tor\Vc\rb 
dcjv-ccs (y/WiA 
y/cVc used *to)) 


*m*to rdd'idir\s (wWiA 
seems 

■to fv-c-fcv-). 
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1 say degree, you say radian 


We all talk about circle angles every day: “nice 360 dude,” or 
'I was heading down that path and I did a complete 180，’’ or, 

...well, you get the picture. The only problem is, we think in 

degrees, but the canvas context thinks in radians. ^ — ^ ^ r^casuvc 

Jc 0v\t v-adiair\ equals 

m 

3 60 degrees = 2Pi radians divided by TU^* 


Nice 360 dude! 

Oh, I mean Nice 2X j O q 
Radians dude! 


Now, we could tell you that: 


and you’re good to go if you want to compute radians in your 
head from now on. Or, if for some reason you’d rather not 
do that in your head, here’s a handy function that will do the 
work for you: 


function degreesToRadians(degrees) { 
return (degrees * Math.PI)/180; 



^ } 

仏 is bHc-Ply m -the 


To get radians -fvom 
degrees, you multiply by 
1U 3hd divide by \20. 


IXsc *tW»s 仏 
V ou to tWmk m 

dieses, Wt ^ rad 
( 0 y divaWm^ av-6- 


0 九 P a 9 c you saw us use Z^/i/Iath. 

Pf "to spcdi-Py -the chd dh^le <yf a 

You to\Ad do -tha-t... ov- jus-t use 

dcgirccsToRadiahsG^O). 


BE th^ 



Interpret tire call to tire arc method and sketch out all tire values on 
tire circle, including the path tire method creates. 

context•arc(100, 100, 75, degreesToRadians(270), 0, true) 


/W 山 * te this divdlc 
Viiii all 七 he av^umc^ts 
av\d 七 hen dv-a>w *thc fa*th 
*this mC*t^od ddll £.V"C3*tcs. 



H"m 七 : >wiia*t is \t({, 
•m *thc fic a-f*tcv- 
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adding the circles 


Pack to writing the TwcetShirt circle code 

Now that you know how to draw circles, it’s time to get back to TweetShirt and add a new 
function, drawCircle. We want to draw 20 random circles, just like we did for squares. To 
draw those circles we need to first determine that the user has selected circles from the shape 
menu. Let’s add that to the previewHandler function. 

Edit your tweetshirt. j s file and add the new code below. 

function previewHandler() { 

var canvas = document.getElementByld( M tshirtCanvas n ); 
var context = canvas.getContext("2d"); 
fillBackgroundColor(canvas, context); 

var selectObj = document.getElementByld("shape"); 
var index = selectObj.selectedlndex; 
var shape = selectObj[index].value; 


if (shape == "squares") { 

for (var squares = 0; squares < 20; squares++) 
drawSquare(canvas, context); 



} else if (shape == "circles") { 

for (var circles = 0; circles < 20; circles++) 
drawCircle(canvas, context); 


TWis todt looks aUost 

*to ^ 

test slaves. \\ the 
USCV V^as C\\ostY\ t\rc\ts 
慟於 s r a^s 

drav/Ode WW 
-to 


yjc 灼 o 如 






I^VcVc passing -the 

"to "the dv-av/Ci\rdlc 
-Puhdtioh, just like wc 

did with d\rawS^ua\rcs. 


What start angle and end angle do you use to draw a complete circle? 

What direction do you use: counterclockwise or clockwise? Does it matter? 

■ 0 |ojp 8 ； 8|diuoo b 6uimbjp 8J,noA 80U|S 8sn noA uo!pai!p ^eijM jq^blu ; f us8op 
)1 ' o 09£ P 9 |6 ub pue ue pue 。0 p 8 |6 ub ㈣ s e m \ N \ 8 |ojio e mbjp no 人 ： v 
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Writing the drawCirck fuwctiow 


••• 


Now let’s write the drawCircle function. Remember, here we just need 
to draw one random circle. The other code is already handling calling this 
function 20 times. 


function drawCircle(canvas, context) { 

var radius = Math.floor(Math.random() * 40); 
var x = Math.floor(Math.random() * canvas.width); 
var y = Math.floor(Math.random() * canvas.height) 




Just like y/c did scares, wcVc 必叫 
-fov- v-ad'ius siz^ *to keep 

-too 


our 


h^d, -the f y 匕 oovdma*tes of 

七 he o( 七 he twc\t avc based o 灼 

七 he v/id*th and heigh-t o-P -the 乙 drwds. 
iVc dhoosc irtumbev-s bctv/cc^ O 

扣 d -the v/id*th ar>d heiglvt ^respectively. 


context.beginPath(); 

context•arc(x, y, radius, 0, degreesToRadians(360), true); 


context.fillStyle 
context.fill(); 


lightblue 


usihj U |ijhtbluc w as 

ou\r -PillS-tylc a^\v\, ahd 
仏 ⑶ -Pillihg -the fa-th with 
^Ohtcxt.-fi||0. 


l^/c use av\ chd a^le V>o° 

"to get a -Pull Wt dv-aw 

匕 ouhte\rdod^wise 狀 ouhd the 

^t\c, but -Po\r a CWt\t) it doesh^t 
M 七七饮 wKidli dHrc^ioh y/c use- 


and test drive! 


So go ahead and type this in (and don’t forget to add the degreesToRadians 
function too), save, and load it in your browser. Here’s what we see (given 
these are random circles — yours will look a little different): 


hoo TweetShirt 


| ◄ ► j | +. http://k>calhost/-Beth/HTML5/TweetShirt/index.htr C Google 




Select background color white ； ) 
Circles or squares? Circles ~T) 
Select text color: Black ~TI 
Pick a tweet: 1 ~T1 


Preview 
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A Little Cookie Break 

^ew! That was a fun set of pages we just went 
trough. We don’t; feow about you, but we’re ready 
for some cookies. How about UKing a short cookie 
break? But, don't {binkwe aren’t going to give you 
Something firn to do wtele you’re having them (checl^ 
on the exercise to the rigk). 

So, sit bad have a little break, and nibble on tliis 
\stele you give your brain and stomacli something 
else to do for a hit Then come on bad and well 
finish off the TweetShirt code! 
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bringing out your inner artist 


To the right you’ll find a smiley face (or a chocolate chip cookie smiley 
face if you prefer). The code below to draw the smiley face is almost 
done; we just need your help to finish it up. With all the work you've 
done in this chapter, you’ve got all you need to complete this. You 
can always check your answer at the end of the chapter when you’re 
finished. 


function drawSmileyFace() { 

var canvas = document.getElementByld( M smiley"); 
var context = canvas.getContext( n 2d n ); 








d ( 

娜 ioo\^ ^严 

ah3lr-ZO < 


1^0 

radius — 75 


s what wcVc looking -fov. You 

你 ight "to some \rcal 

^Kodolatc Cookie smiley -fades 
while youVc ai it … 


context.beginPath(); 

context•arc(300, 300, 200, 0, degreesToRadians(360), 
context.fillStyle = M #ffffee"; 
context.fill(); 
context.stroke(); 


true) 

The c:\Yt\t. We did 
this ohC *Po\r you. /Votive wc 
billed it wi-th yellow. 



context.beginPath(); 

context. arc (_, _, 25, _, _, true) ; ^ - TVis is the Ic-Pt eye. 

context.stroke(); 


context.beginPath(); 

context•arc(400, _ 

context.stroke(); 


TVis is the Hght eye- 


context.beginPath(); 

context._(_ , 

context._(_ ， 

context._(); 

context.beginPath(); 

context._(300, 350 

context.stroke(); 



This is the 

hose. 



A^d s the mouth. This 
is the "braky oy\cf 


degreesToRadians (_), degreesToRadians( 
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adding the jsonp for twitter 



Welcome back. 


You’re back, you’re rested, refreshed, and we’re 
on the home stretch to getting this start-up off the 
ground. When you look at all the work we’ve done, 
all we really have left is to display the tweets and 
the other text in the canvas preview. 

Now, to get a get a tweet on the canvas we first 
need some of your recent tweets to choose from, 
and we’re going to use JSONP to do it. If you 
remember Chapter 6, you already know how to 
do this. If you need to, go back to Chapter 6 for a 
quick refresher. All we’re going to do is: 


Add a <script> at the bottom of the tweetshirt. 
html file to make a call to the Twitter JSONP API 
We’re going to ask for the most recent status 
updates of a specified user. 


Speaking of goodies, 
remember that JSONP code 
we baked in Chapter 6? TVs 
time to pull it out of the oven. 



Implement a callback to get the tweets that 
Twitter sends back. We’ll use the name of this 
callback in the URL for the <script> in Step 1. 


Here’s ouv- ttTAIL -file -fov- Twcc*tShiv-*t. 

youv head element hcv-c, Bv\d youv -fov-m hcv-c (wc waited *to save a -few *tv-ccs). 


<html> 



<body> 

<form> 


ouv JSOKP ^llj this wo\rks by -the J£0H by 

the Tv/i*t*bcv URL, passing -that JSOK *to -the dallbadk 

(y/hi^h well dc-fmc m jus*b B set)- 


</form> 


the Twittcv- API ^11- 

WcVc -fov- d usev 

whith will give us statuses. 


Change "this -to youv 
ov* somcohC 
ciscos i-p you like. 


<script src= M http : //twitter.com/statuses/user timeline/wickedsmartly.json? 
cal lback=update Twee ts ▼▼> 


</script> 



</body> 

</html> 


^[y\A -the ddllba^k y/hcv-c 

the JSOK will be passed badk. 


Type this all on o^c Imc m youv 
*bcx>*t -file (it’s -fcoo *to -ri*t 
oy\C Imc m the book). 


Thcv-c^s d lo*t Jomg oy\ hcv-c- l-P "this is o^ly vaguely 

please do have a look ba^k at how JSOKP wov-ks, 'm Chaptcv- ^>. 
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ftettmg your tweets 


We’ve already done the hard work, which is getting the 
tweets from Twitter. Now we need to add them to the tweets 
〈 select 〉 element in the < form 〉 of our page. Just to review 
again: when the callback function is called (in our case, the 
function update Tweets), Twitter hands it a response that 
contains JSON formatted tweets. 

Edit your tweetshirt. j s file and add the updateTweets 
function at the bottom. Here’s the code: 



Tv/rtWs \rCSfor>sc is a\r\ray Wets. 
Wc-t Kas a d da-ta *m \i; 

b> use is o( Wc*t- 


ttcvVs ou\r dallbadk- 


is passed a v-cspohsc 
^Ohtaihih0 -the ty/ccts -pv-om 
the usev- tirhdihC 3s dh av-V-^y 
o( tweets. 


function updateTweets(tweets) { 

var tweetsSelection = document.getElementByld("tweets n ); 


I/Ve yab a vc-fcv-c^dc *to *t>wcc*b 

sclcd*tioy> -fv^orw -fovrw. 


for (var i = 0; i < tweets.length; i++) { 

tweet = tweets[i]; 
var option = document • createElement ('▼ option ”）； 


4r 


Pov eadii 七 v/ert’m 七 he av-vay c^f 七 v/ee*ts，c 
* …七 a -fv-om 七 he av-vay. 


option.text = tweet.text; 

option.value = tweet.text.replace("\ 

tweetsSelection.options.add(option); 


<： 


Cv-catc d hCW option dcrwCht 
- Sc*t »*b *to *tV^c 


); 


tweetsSelection.selectedlndex = 0 

/Wd; -finally, wc r»akc suv-c -the -fiv-s-t 
tweet is -the selected tweet by 
scUmg -the sclc^-tcdlhdcx o( the 

<sclc^t> "to O (the -Pivst optioh 
士州⑶七 doh-taihcd with'm it). 


後 thch take the 
hew option, ahd 

add it "to the 

Wet sclc^tioh ih 

the -Po\rrn. 

A-Ptcv y/c^vc dov\c this (or 

eadh iv/cci, y/c have a <sclcdt> 

dcnr»c^-t that 乙 cmtaihS ar\ option 

-Po\r cadh tv/cct 


^ SC t ，ts valuc sa.e ^ 

r y T VC — W the , l，U, c 

^Pl^c double quotes with si^lc 
nuo-tes (so we avoid Wti 
,ss ^s i h i hc _ L) Xt h 9 


you are here ► 
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testing tweetshirt with twitter 


Test driving Tweets 系 

Let’s do a quick test drive. Make sure you’ve got all 
the code added to tweetshirt. j s and index. html. 
Also make sure you’re using a Twitter username that 
has recent tweets in your script src URL (so you’ll be 
sure you see some tweets!). Load the page and click on 
the tweets selection. Here’s what we see: 


REAU Co 。 


一。 。 __ TweetShirt 

^ ■上 J Lj^^ mt ?:" locainost /〜 B eth/HiMLViweet!>nirt/_ndex.htf C k (^Toog!e 



Select background color ["white ~Tl 
Circles or squares? NeitheiTT^ 

Select text color: ^lack 

Pick a tweet ： 1 If it’s worth tweeting, it's worth putting on a #tweetshirt ^ 1 




Preview 



Guys, this is great. 

We have squares and circles 
and Jim's got us hooked up to 
Twitter! Whafs next? 


Frank’s tablet 


Jim: We’re almost there. We need to nail down all the text we 
need to display. We’ve got the two messages: the “I saw this 
tweet” and “and all I got was this lousy t-shirt!” and also the 
tweet the user has chosen to display. Now we’ve got to figure out 
how to display it, not to mention apply some styling to the text. 

Frank: I’m assuming we can throw some text in the canvas and 
then apply some CSS to it? 

Joe: I don’t think it works like that. The canvas is a drawing 
area, I don’t think we can place text and style it, we have to 
draw text onto the canvas. 

Jim: Well, this time I learned my lesson and I’ve already 
checked out the API for text. 


Joe ： Good, I haven’t looked yet; how does it look? 

Jim: Remember that arc method? We have to custom draw all 
our text using that. 
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bringing out your inner artist 


Frank: Are you kidding me? I guess I’ll be working all weekend now. 

Jim: Gotcha! No seriously, there is a fillText method that takes the text to draw on 
the canvas along with the x, y position of where to draw it. 

Joe: That sounds pretty straightforward. What about the differences in style? If I 
remember the comp, the tweet text is italic, and the rest of the text is bold. 

Jim: We need to look a bit more, there are various methods for setting alignment and 
fonts and fill styles, but I’m not not quite sure how to use them. 

Frank: And to think maybe I could have helped, but no CSS? 

Jim: Sorry, like Joe said, this is an API for drawing onto a canvas, it doesn’t make use of 
HTML or CSS styling in any way. 

Joe: Well, lets pull up the API and take a look and then we can try getting the “I saw a 
tweet” text on the canvas. Gome on Frank, join us, this can’t be too bad and I’m sure we 
can use your knowledge of fonts, styles and all that. 

Frank: Sure thing, I’m here for you! 


1/Ve {p dva>w ihc u | saw this above the 

actual iv/eei, up at the -top-lc-Pt dowev. 


i Saw t\]'6 tweet 


dbraw 


c 


aNd all i got was thiS lou^y 


Select back^rouNd color： 
0*rclG5orSc(jare5? [gix^ \t] 
Select color： f Black/T) 


Pick a tweet ： l @< ； tarbaz2ceo a #tweet$hirt. 
[FVgs/iew^ 


Md thch y/c draw u a^d all I 

Joi v/as this lousy at 

ihe bottom vijh-t below 七 he 
o( 七 he tv/cct 


l/Vell jvab the -fov-cjv-ou^d dolov- sclcdtioh 
"to use as -the Color of -the text 


Wc^vc already got the 

tv/ccts \v\ the iweet 


you are here ► 
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structure and presentation discussion 



One thing that confuses me about drawing 
text in canvas is that we’ve always stressed 
that content is separate from presentation. With 
canvas it seems like they are the same thing. 
What I mean is, they don't seem to be separate. 


鵪 



That’s a really good point. 

Now let’s work through why it’s set up this way. Remember 
that canvas is designed to give you a way to present graphics 
within the browser. Everything in the canvas is considered 
presentation, not content. So while you usually think of 
text — and certainly tweets — as content, in this case, you’ve 
got to think of it as presentation. It’s part of the design. Like 
an artist who uses letterforms as part of her artwork, you’re 
using tweets as part of the artwork of your t-shirt design. 

One of the main reasons that separating presentation and 
content is a good idea is so that the browser can be smart 
about how it presents the content in different situations: for 
example, an article from a news web site is presented one 
way on a big screen and a different way on your phone. 

For our t-shirt design, we want what’s in the canvas to be 
more like an image: it should be displayed the same way no 
matter how you are viewing it. 


So, let’s get the text on the canvas and get this start-up 
rolling! 
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Code Magnets 


It’s time for your first experiment with canvas text. Below we've started the code for drawText, the 
method we’re going to call to draw all the text onto the preview canvas. See if you can finish up 
the code to draw "I saw this tweet” and "and all I got was this lousy t-shirt!” on the canvas, we’ll 
save drawing the actual tweet for later. Make sure you check your answer with the solution at the 
end of the chapter before you go on. 


function drawText(canvas , context) { 

var selectObj = document.getElementByld( n 
var index = selectObj.selectedlndex; 
var fgColor = selectObj[index].value; 


context. 
context. 
context. 
context. 


=fgColor; 

'bold lem sans-serif' 
="left"; 


)； 



20, 40) 


This is "the y 
position -fov the U | saw 
this 七 C 此 


Fov- iright 

how, wcVc 

just pu-t-tmg 
ih whcv-c 

the 乙 ode "to 

dvaw -the 

will be. 


// Get the selected tweet from the tweets menu 
// Draw the tweet 


context.font = 

context._ 

context. 



tt’m 七 : Wlc’ll be us*m^ 3v\ *rtali£> scvi-f 
-fov 七 bu*t >wa 朽七 
七 iVis ov\C *to be bold sa^s—scv*i-f- 

v/c *bo position the 七亡乂七 

•m bo-t-fcom— 


("and all I got was this lousy t-shirt! 



^ -to d^raw -this ic%i ai zo 

Hgh-t side o( the cavw/as, ahd 
-rv-orw the bottom o*p the ^hvas, so it 
babies the "top lihC o-p text. 


fillText 


bold lem sans-serif | | fillText 




1 textAli gn | [ 

textAlign 

| 

canvas.height-40 | 


jfillCircle 

1 

fillRect 


M I saw this tweet"| 


Lii£U 


you are here ► 
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closer look at text in the canvas 


Canvas Text Up Cfee 

Now that you’ve had a chance to draw your first text in the canvas, it’s time to take a closer 
look at the text methods and properties available in the canvas API. As you found out in the 
exercise this is a fairly low-level API—you have to tell the context what text to draw, what 
position to use, and what font to use. 

In this J]p Cl^se segment we’ll examine the alignment, font, and baseline properties, and the fill 
and stroke methods in detail so you'll be a canvas text expert by the time you turn the page! 


alignment 

The text Align property specifies where the anchor 
point for the text is. “start” is the default. 

context.textAlign = "left"; 

Possible values are: start, end, left, right, and center. 
Start and end mean the same as left and right in left- 
to-right languages, like English, and are reversed in 
right-to-left languages, like Hebrew. 





Lc-f-t a\\^v\ Ctv\icr all 沪 Ri^-t aliy 


fill Sfr^e 


Just like for rectangles, we can stroke and fill text. We 
provide the text to draw，the x, y position and an 
optional parameter, maxwidth, that causes the text to 
scale if it is wider than maxwidth. 

context.fillText( M Dog M , 100, 100, 200); 

context.strokeText("Cat", 100, 150, 200) 


-Pilled text. 


Dog^ 



^ s*tv-okcd 七 e 此 




yb W.dc^r 1^ 2.00, 
••七 is auWatitallY staled to +»t. 
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bringing out your inner artist 


To set the font properties, you can use the same format you’re used 
to using in CSS, which is handy. If you specify every property value, 
you，ll include: font style, weight, size, and family, in that order. 

context.font = M 2em Lucida Grande"; 
context .fillTextr Tea' 100, 100); 
context. font = ’’italic bold 1 • 5em Times 
context.fillText("Coffee", 100 A 150); 

The spec recommends that you use vector fonts only (bitmap fonts 
may not display very well). 


serif"; 


Tea 

Coffee 



baseline 

The textBaseline property sets the alignment points in the font 
and determines the line your letters sit on. To see how the line affects 
the text, try drawing a line at the same x, y point you draw a text. 

context.beginPath(); Alphahpt ^ alphabetic 

context.moveTo(100, 100); 

context. lineTo (250, 100) ; Alphabet bottom 

context•stroke (); 
context•textBaseline = "middle"; 

context.fillText("Alphabet", 100, 100); Alphabet 

Possible values are: top, hanging, middle, alphabetic, ideographic, 
and bottom. The default is alphabetic. Experiment with the different 
values to find what you need (and check out the spec for more details). 



you are here ► 
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drawing text 


Wviwg drawTcxt a spin 

Now that you’ve got more of the API in your head, go ahead and get the code you created 
in the Magnet Code exercise typed in — here it is with the magnets nicely translated to code: 


function drawText(canvas , context) { 

var selectObj = document.getElementByld (’ 'foregroundColor n ); 
var index = selectObj.selectedlndex; 
var fgColor = selectObj[index].value; 


context.fillStyle = fgColor; 
context.font = "bold lem sans-serif"; 
context.textAlign = "left"; 

context.fillText("I saw this tweet", 20, 40); 

I put todc drav/s 

Wet m a set … 


context.font = "bold lem sans-serif"; 



context.textAlign = "right"; 

context.fillText("and all I got was this lousy t-shirt! n , 
canvas.width-20 r canvas.height-40); 


After you’ve got it typed in, update your previewHandler 
function to call the drawText function, and give it a test drive by 
loading it in your browser. You should see something like we do: 


tteve s 七 e% 七 . Wlc^vc ^o*t sa^s-sev-i-f 

bold a*t torrtti lodatiov>. 


« o o 

卜卜 j I 十 


TweetShlrt 


/k>cal»ost/-B<th/M 1ML!>/lweet!>hirt/in<aex.h , C ] (Q- boogie 


I saw this tweet 


and all I got was this lousy t-shirt! 



Select background color White C | 

Circles or squares? [ Neither ~T ] 

Select text color: Black : ] 

Pick d tWCCt ： If it'& worth tweeting, it's worth putting on a #twgetshirt t 1 


Md wp vc got 
dowh ilcv-c- 


〔 Preview J 




^harpen your pencil 


Take a shot at completing the drawText 
function. You need to get the selected 
tweet, set the font to an italic serif font 
that’s slightly (1.2em) bigger than than the 
default, make sure the text is aligned left, 
and position it at x = 30, y = 100. This is the 
last step before we see the TweetShirt! 


\A/v'i*tc youv codt above, 
a”d dor：i a 七七 ^ 

从 % 七？ ay! (RcallYi) 
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Completing the drawTcxt fuwctiow 

Here’s our solution code. How does it compare to yours? If you haven’t already typed your 
code in, go ahead and type in the code below (or your version if you prefer), and reload your 
index. html. We’ll show you our test drive on the next page. 


function drawText(canvas, context) { 

var selectObj = document.getElementByld( M foregroundColor"); 
var index = selectObj.selectedlndex; 
var fgColor = selectObj[index].value; 


context.fillStyle = fgColor; 

context.font = "bold lem sans-serif"; 

context.textAlign = "left"; 

context.fillText("I saw this tweet", 20, 


selectObj = document•getElementByld("tweets") 
index = selectObj.selectedlndex; 
var tweet = selectObj [index] .valued- 
context .font = "italic 1.2em serif"; 
context.fillText(tweet, 30, 100); 



lAfe dov^i need *to i\\t Wc*t 
*to i\st left; 七 ^ is 

still sc*t -fv-om U\> VlCV-C. 


〆 


yab 如 selected °?^°^ 


£c*t *to i*t3lid scvi-f> 

jus*t a -tad b 你 v... 

… a^d dva>w it at position 1 > 0 , 100 . 


context.font = "bold lem sans-serif"; 
context.textAlign = "right"; 

context.fillText("and all I got was this lousy t-shirt! n , 
canvas.width-20, canvas.height-40); 



you are here ► 
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launching tweetshirt 


A quick test drive and 

thcwTW*efFlAUNCH! 

We hope you’re seeing what 
we’re seeing! Nice huh? Give 
the interface a real bit of quality 
assurance testing: try all the 
combinations of colors and 
shapes, or swap out the username 
for another you like. 

Feel like you’re ready to launch 
this for real? Let’s do it! 



-fou^dcv? 


Treves 

*tv/CC*t OY\ 

七一 sWirt \>V-CVICV/. 


« n n 


TweetShirt 


+ I hnpT/local hosi/^Bcch/HTMLS/TweeiShia/indcx.htf C|^Q7 Coogle 


I saw this tweet 


If it’s worth tweeting ， it’s worth putting on a M tweetshirt 


and all I got was this lousy t-shirt! 


Select background color: white ； 


Circles or squares? Circles ~T 


Select text color Black : 1 

Pick a tweet ： If it's worth tweeting, it's worth putting on a #twgetshirt C 


/f. 
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Uh guys, I sorta did a little 
work on my own and I have 
the image code already for 
the Twitter bird... 





The first thing we need is an image. We’ve put an image named twitterBird. png in the 
TweetShirt folder. To get that into the canvas we first need a JavaScript image object. Here’s 
how we get one: 

^ ' Cv-ca*tc a y \ c^i object 


var twitterBird 
twitterBird.sre 


=new Image(); 

= TI twitterBird. png 11 ; 


A^d sci its souvdc -to be 七 he 
of ihc TVrtteir bivd- 



The next part should feel pretty natural by now; we need to draw the image on the canvas 
using a context method named, you guessed it, drawlmage. 


context.drawlmage(twitterBird, 20, 120 , 70, 70); 



个 ,^ . 

Us'mj -the r^rthod ttcv-c s ouv A 灼 d spcdi-fy ^ y lodatio^, 

object 



There’s one other thing to know about images: they don’t always load immediately, so you 
need to make sure that the image has fully loaded beford you draw it. How do we wait until 
something is loaded before we take action? We implement an onload handler: 


twitterBird.onload 




function() { 


lids 


context.drawlmage(twitterBird A 20, 120, 70, 70) 

後 dv-aw the image -fco the 
Cdivw/diS usrng the ^o^-tex^s 
dv*dw|rvtd^e method- 


you are here ► 
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adding the image 



See if you can put together the drawBird function from all the pieces Judy gave us. The 
drawBird function takes a canvas and context, and draws the bird onto the canvas. You 
can assume that with this function we’re placing “twitterBird.png” at the location x=20, 
y=120, with a width and height of 70. We’ve written the method declaration and the first 
line for you. You'll find our solution at the end of the chapter. 


function drawBird(canvas, context) { 
var twitterBird = new Image(); 


Youv- toAt Kcv-c 


/Wake su\rc you add d ta\\ -to 
七 he dv*3y/Bilrd ih 

p\rcvicwHahdlcv- -Puhd-tioh. 


Yet another test drive 


Double check your code and get in 
another test drive! Wow, this is really 
looking polished now. 

Give it a few tries; try it with circles or 
squares. You’ll notice that we used a png 
with a transparent background so that 
the circles and squares work if they’re 
behind the bird. 


TKis v-odks ar\d v/cVc y/cll 
oy\ ouv v/ay *to a 

too\ aff. Bu*t like >wc said) 

v/cVc or> 7 ou 

ar\d all 
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iiereiare no o 

Dumb Questi9ns 


We haven’t seen the Image object before. You used it 
when you added an image to the canvas. What is this? Why 
didn’t we create it with document_createElement(“img ”)？ 

A- 

Good catch. Both methods you mention create image 
objects. The JavaScript Image constructor is arguably a more 
direct way to create images from JavaScript and gives us a little 
more control over the loading process (like giving us the ability to 
easily use a handler to be notified when the image is loaded). 

So, our goal here is to create an image, and to make sure it’s 
loaded before we draw it on the canvas. The Image object gives 
us the best path to doing that. 

Canvas is cool... but also kind of a pain compared to 
HTML. Anything more complicated than basic shapes must 
be really difficult to do. 

There’s no doubt about it, you’re writing graphics code when 
you’re programming canvas. Unlike the browser, which takes care 
of a lot of details for you, like flowing elements onto the page so 
you don’t have to worry about drawing everything yourself, you 
have to tell canvas where to put everything. 

Canvas gives you a lot of power to do almost any kind of graphics 
(currently, 2D) you can imagine, however. And we’re in early days 
of canvas; it’s likely that libraries of JavaScript code will make it 
easier to write graphics for canvas in the future. 

I noticed that for very long tweets, the tweet just 
disappears off the edge of the canvas. How can I fix that? 

One way to fix it is to check to see how many characters 
the tweet contains and if it’s greater than a certain number, split 
it into multiple lines and draw each line separately onto the 
canvas. We’ve included a function, splitlntoLines, in the code on 
wickedlysmart.com that you can use to do just that. 

I also noticed that some tweets have HTML entities in 
them, like &quot; and &amp;. What’s that all about? 

The Twitter API that we’re using to get tweets as JSON 
converts characters that people post in their tweets to HTML 
entities. It’s actually a good thing because any special characters, 


or even quotes, that would mess up our ability to get the tweets 
properly from the JSON are represented as entities. If we were 
displaying the tweets in HTML, those entities would be displayed 
in the browser as the characters you’re meant to see, just like 
entities you add to your own page are displayed correctly in the 
browser. However, as you saw, in the canvas they don’t look so 
great. Unfortunately, right now there is no function in the canvas 
API that will convert those entities back to their characters, so 
you’d have to do that yourself. 

Can you do anything fancy in canvas, like put 
dropshadows on text or shapes? 

Yes! There are lots of fancy things you can do with 
canvas and dropshadows is certainly one of them. As you’d 
expect, you create a shadow by setting properties on the 
context. For instance, to set the blur size of the shadow, you set 
context.shadowBlur. You can set the position of the shadow with 
context.shadowOffsetX and context.shadowOffsetY, and the color 
with context.shadowColor. 

Other things you can do with canvas you might want to check into 
are things like drawing gradients, rotating shapes, and putting 
rounded corners on rectangles. 

What other interesting things can I do with canvas? 

A lot! We’ll cover a couple more ways to use canvas in later 
chapters, and you’ll definitely want to check out the canvas API 
for more: http://dev.w3.org/html5/2dcontext/. 

Is all this canvas stuff going to work on my mobile 
device too? Or am I going to have to rewrite it for mobile 
users? 

If your mobile device has a modern browser (devices like 
Android, iPhone and iPad all do), then this will work just fine 
(the sizing of the page might be off, but the functionality will 
work. The nice thing about canvas is, because you’re drawing 
with raw pixels, what you draw will look the same everywhere 
(or, everywhere on browsers that support canvas). Fortunately, 
modern smart devices like Android, iPhone and iPad all have 
sophisticated browsers that have most of the functionality of 
desktop browsers. 


you are here ► 
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canvas metadata 


0 


I was thinking it would be great to be 
able to save a t-shirt and the location 
and position of all its squares. Is there a 
canvas save method for that? 




ml 


No, that requires a little extra work. 

The canvas is really meant to be a simple drawing 
surface. When you draw a shape, the canvas just sees 
it as pixels. The canvas isn’t aware of the specifics 
of what you’re drawing, and it doesn’t keep track of 
any shapes. It simply creates the pixels you ask it to 
create. (If you’re familiar with the graphics terms 
‘bitmap’’ and “vector” drawing, you’ll recognize what 
canvas is doing as “bitmap” drawing). 

If you’d like to treat the rectangles in your canvas 
as a set of objects that you can save and maybe 
even move or manipulate, you need to maintain 
the information about the shapes and paths as 
you create them on the canvas. You can store this 
data in JavaScript objects. For instance, if you’re 
keeping track of the random circles we’ve drawn on 
the TweetShirt canvas, you’d need to save the x, y 
location, the circle radius and color in order to be 
able to recreate that circle. 


This sounds like a good project for you..;) 
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The Twcc*tShiv-"t -fou^dev also 
waited *to pass alo^ that shc ; s 
happy -to see the web app works 
oy\ hcv* iPad Br\d iPhone ioof l-f 
she’s happy, weVe happy. 
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review of canvas 


(^^BUILET POINTS - 

■ Canvas is an element you place in your page to 
create a drawing space. 

■ The canvas has no default style or content until you 
provide it (so you won't see it on the page until you 
draw something in it or add a border with CSS). 

■ You can have more than one canvas on your page. 
Of course, you’ll need to give each one a unique id 
to access each using JavaScript. 

■ To specify the size of the canvas element, use the 
width and height attributes on the element. 

■ Everything you put in canvas is drawn using 
JavaScript. 

■ To draw on the canvas, you first need to create a 
context. Currently, a 2D context is your only option, 
although other context types may exist in the future. 

■ A context is needed to draw in the canvas because 
it provides a specific kind of interface (e.g., 2D 
versus 3D). You'll be able to choose from more than 
one kind of interface to draw on a canvas. 

■ You access the canvas by using context properties 
and methods. 

■ To draw a rectangle in the canvas, use the context. 
fillRect method. This creates a rectangle filled with 
color. 

■ To create a rectangle outline, use strokeRect 
instead of fillRect. 

■ Use fillStyle and strokeStyle to change the default fill 
and stroke color, which is black. 

■ You can specify colors using the same format as 
you use with CSS (e.g., “black” ， “#000000” ， “rgb(0, 

0, 0)”_ Remember to put quotes around the value of 
the fillStyle. 


■ There is no fillCircle method. To draw a circle in 
canvas, you need to draw an arc. 

■ To create arbitrary shapes or arcs, you first need to 
create a path. 

■ A path is a invisible line or shape you create that 
defines a line or area on the canvas. You can’t see 
the path until you stroke or fill it. 

■ To create a triangle, create a path using beginPath, 
then use moveTo and lineTo to draw the path. Use 
closePath to join two points on the path. 

■ To draw a circle, create an arc that is 360 degrees. 
Your start angle is 0, and your end angle is 360 
degrees. 

■ Angles are specified in canvas using radians, not 
degrees, so you need to convert from degrees to 
radians to specify your start and end angles. 

■ 360 degrees = 2Pi radians. 

■ To draw text in canvas, use the fillText method. 

■ When you draw text in canvas, you need to specify 
the position, style, and other properties using 
context properties. 

■ When you set a context property, it applies to all the 
drawing that follows until you change the property 
again. For example, changing the fillStyle will affect 
the color of shapes and text you draw after setting 
the fillStyle. 

■ Add an image to your canvas with the drawlmage 
method. 

■ To add an image, you first need to create an image 
object and make sure it’s completely loaded. 

■ Drawing on canvas is like doing “bitmap” drawing in 
graphics programs. 
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WebviUe^You^ll hear it here first 
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same web pages. Yeah, you L it W • sharin § 

b ee„ mixi ^L^^ 

By Troy Armstrong 

INQUIRER staff writer 

^!lwpT ； 3^ we， ve formed a tight relationship. You 

do that very well. But th^fpretty and 1 
everything has changed FmdresL a111 do . Wlth <canvas> ? 

:⑽™。二， =====.，， 

<video>1agr<Garv^> 0 M^ woman behind the 

his own, you know decoding a^ftho ell, .^ Vldeo> does v ery well on 
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<can ： S g + So>， St0re ahCad fr ° m ^ P— 
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L^cal resident Heidi Musgrove was 

t S h e 0 t C w==「 s n 加 trUth about 
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HTML5CP0SS 

We’re looking forward to checking out the <canvas> 
and <video> scoop in the next chapter. In the meantime, 
cement your new canvas knowledge with a quick 
crossword and perhaps a cup of tea. 



Across 

4. Everything on the canvas is_. 

5. We_aligned the "and all I got was this lousy 

t-shirt!” text. 

6. The property we set to fill a shape with a color. 

7. You can tell when something has finished loading using 

an_handler. 

9. The non-existent context method Jim tried to use to create 
circles. 

12. Draw a circle with an_. 

14. How we make the path of a shape visible. 

15. Want to know which option is selected? You might need 
this property. 

16. An invisible line you create to draw a shape. 


Down 

1. Best place for a good tweet. 

2. This context method creates a rectangle. 

3. Canvas and_go well together. 

8. There are 360 _in a circle. 

9. Use this method to draw text on the canvas. 

10. We think in degrees, canvas thinks in_. 

11. An object with methods and properties to draw on a 
canvas. 

13. To move your path pencil to point 100,100, use 

( 100 , 100 ); 
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bringing out your inner artist 


Assume youVe used -the 

*to pi 匕 k the 

values -fov youv *b— 


BE th^ Br©wsei 

§©|ug©ti 

Now tiiat you have an interface, 
execute these JavaScript statements 
and write in tiie value for 
each interface element. 


var selectObj = document.getElementById (’ ▼backgroundColor n ); 
var index = selectObj.selectedlndex; 

var bgColor = selectObj [index] .value; y/Wrbe 



var selectObj = document.getElementByld( n shape n ); 
var index = selectObj.selectedlndex; 
var shape = selectObj[index].value; 


dilrdlcs 


var selectObj = document.getElementByld("foregroundColor"); 
var index = selectObj.selectedlndex; 

var fgColor = selectObj[index].value; blatk 


No 七 i 乙 C 七 ha 七 *Pov* Odh mchu op 七 ion vdluc ； 
we gc-t the select clc^Cht the ofiioh is 
^Ohtaihcd \ y \, -pihd the selected option 

with -the sdc^cdl^doc pvopev-ty, 扣 d the 

the value of the selected oftioh. 



above- 


i\\t values 


Y/C 


3r\svicvs 



Rcmcrwbcv- "the value -the option 
r^ay be diHev ⑶七 七 he *tc£t you sec 

•m -the 乙 ojrrbrolsj m ou\r CBsc, i*t’s \us*t 
dasc -fiv-s*t letters c^f 


Select background color: Whtte t 


Circles or squares? Neither i 


Select text color: Black t 



Pick a tweet: f 


A 

T 


Look a*t ttTMl 
dAdm *to see vdlucs 
o+ i\\t Options 1-f you 
y\ccd *bo. 


(> 


review 
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exercise solutions 



Pseudo-code Magnets Solution 


Use your pseudo-magical coding powers to arrange the pseudo code below. We need to write the 
pseudo-code for the drawSquare function. This function takes a canvas and context and draws one 
randomly sized square on the canvas. Here’s our solution. ,^ ^ s ^ ^ 


厂 


OhC 十 o\r you. 


function drawSquare ( 厂 canvas j , | C ontext~~| 


){ 


calculate a random width 
for the square 


calculate a random x position for the 
square inside the canvas 


position 


calculate a random y 

square inside the canvas 


for the 



Youv Kcv-c! 


draw a square at position x, 
y with width w 


i^arpen your pencil 


To make sure we see only new squares in the canvas each time we 
click preview, we need to fill the background of the canvas with the 
background color the user has selected from the "backgroundColor” 
select menu. First, let's implement a function to fill the canvas with that 
color. Fill in the blanks below to complete the code. Here's our solution. 


function fillBackgroundColor(canvas, context) { 

var selectObj = document. getElementByld ( M b3dk^\rouhdColo\r n )； 
var index = selectObj.selectedlndex; 

1 /- 一 All v/cVc dom^ *to a batk^vouiad 

var bgColor = selectObj . options [ index] • value; ^ ^ 如⑽ 吶 a i^ai Alls 

context .fillstyle = bgColor ； ⑼ da^vas W\i\\ a Co\or. 

context. fillRect (0, 0, d3r\vas.y/id*th , ; 
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BE th^ §©|ug©ti 


Interpret tire call to tire arc metiiod and sketch out all tire values on tire 
circle, including the patiitiie method creates. 


context•arc(100, 100, 75, degreesToRadians(270), 0, true) 
ar>d dv-d>M 4 --- s*ta\rt hc^rc 

douy>icv-tlodkw*is< 

Wius 二 7 安 



avd fa 七 


s*tav*t 二 2.70 



eir>d 扣 ★ 二 0 。 



So you have a path! Now what? 

You use the path to draw lines and fill in your shape with color, of course! Go ahead and create a 
simple HTML5 page with a canvas element and type in all the code so far. Give it a test run, too. 


context.beginPath(); 
context.moveTo(100, 150); 
context•lineTo(250, 75); 
context•lineTo(125, 30); 
context.closePath(); 


Sc*t *thc width of I \y\C to dv*ay/ ovc\r *thc path. 

oycy the path v/ith li^c. 

Set (tolo\r *tx> -filj the t\riahglc. *tp 

..Pill .ibc. .iv ： i^lc .y/iih. . 


context.lineWidth = 5; 
context.stroke(); 
context.fillStyle = "red"; 
context.fill(); 



ttevVs *thc CoAt so -fav-. 


只 O O Triangle 



| < ^ | + ^ httD ： //iocalhost/-Beth/HiML!>/ rweei oooq 

W\\cy\ >wc load ouv 七 … 灼 * fay, 


Ifj 

hcv-c^s v/lia*t >wc made a 

^00 % 孓 00 davwas *to dv-av/ *m)- 


轟 



▼ 

/iS 
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exercise solutions 



Intermission Solution 




Smiley face 


Time to practice your new arc and path drawing skills 
to create a smiley face. Fill in the blanks below with 
the code you need to complete the smiley face. We’ve 
given you some hints about where the eyes, nose and 
mouth should go in the diagram. 

Here’s our solution: 


function drawSmileyFace() { 

var canvas = document.getElementByld("smiley"); 
var context = canvas.getContext( n 2d M ); 



context.beginPath(); 

context.arc(300, 300, 200, 0, degreesToRadians(360), true); 

n 一 TKc -fade divdlc- 



context.fillStyle = n #ffffee"; 
context.fill(); 
context.stroke(); 


context.beginPath(); 
context . arc (2-00 r 2^0 r 25, O r r true); 

context.stroke(); 

context.beginPath(); ^ 

context.arc (400 , 2-^0 r 2*5, 0 r r *tv"UC) ; 

context.stroke(); 


.. 〜 b.’uic. I/Ve did "this ohc -fov 
1 ^^^ y° u * wc -rilled it wi-tK yellow. 


TKis is -tlic Ic-f-t eye. TKc o( 

is at %-ZOO, y-Z%, -the 
\radius is the startihj a^jlc is O, 

Ad the Chdihj a— is /VJatK.PI ^ Z 
vadiahs CV>0 dcgv-ccs). Wt stroke the 

so y/c "tKc ou*tlihC o*p "tlic 
tWt\t (but ho -fill). 

This is 七 he vijivt eye- Just like 
Ic-fi eye, e% 崎七 it’s a 七 ^=-\00. 

Wc use douy\icv-tlo6kv/isc (*brue) -fov- 
七 he div^frtio 灼 （ i*t docs^t ma 七七伙 
-fov- a tomplcic 


context.beginPath(); 
context• movcTo ( ZOO f 1>00) 
context . ImcTo (iOO f 1>^0 ) ； 
context. stroke (); 

context.beginPath(); 
context. (300 , 350, 7*5, 

context.stroke(); 


is 七卜 hose. Wc use ^oMtJodOO.lOO) io move 
usc ^To(ZOO^O) because h0 sc is lohft. 

I we stroke path. 3 

jci a more v-calisiid smile, v/c s-tav-i a^d tv\A *tKc edge o( 
-tKc mouiK a*t 2.0 dcjv-ccs bclo>w *tKc * 一 a 乂 is. TKat means -tKc 
s-tavtmg a^^le is 2.0° } a^d 3^1 c is I 厶 O 0 . 

degreesToRadians (ZO) , degreesToRadians (I^O) , -false) ; 

T^c divcdtion is dlo^ky/isc (-false) bedduse y/e want 
mou^bli in d smile. (Rcmcmbcv, s-tav-tmj 
pom 七 is *to 七 lie vigK*t o-f 七 he mou 七 ii dentev-. 


344 Chapter 7 
























bringing out your inner artist 



Code Magnets Solution 

It’s time for your first experiment with canvas text. Below we've started the code for drawText, the 
method we’re going to call to draw all the text onto the preview canvas. See if you can finish up 
the code to draw "I saw this tweet” and "and all I got was this lousy t-shirt!” on the canvas, we’ll 
save drawing the actual tweet for later. Here’s our solution. 


function drawText(canvas , context) { 

var selectObj = document • getElementById ('▼ 
var index = selectObj.selectedlndex; 
var fgColor = selectObj[index].value; 
context. 



fillStyle [ = fgColor; 
context. 1 font \ = "bold lem sans-serif' 

="left' 


context.J textAlig ： 
context • jfillTextJ ( 一， 




This is "the y 
position -fov the U | saw 

this 七 wt. 


Fov- v-iglvt 
灼。 w, wcVc 
just pu-t-tmg 

ih whcv-c 

"the 匕 。 de "to 

the 

Wet ic%i 
will be. 


// Get the selected tweet from the tweets menu 
// Draw the tweet 


context• 
context. 


font =" 

bold lem sans-serif | 

textAlign 

一 = n J~right 1 M ； 4 ： 

■ fillText 

_( n and all I got was 


Hirrt: Wlc’ll be scv-i-f 

-Por\*t -fov bu*t wa 灼七 

■tKis *fco be bold 


ttm 七 : y/c *to position the 

•m the bottom - \r13h 七 dormer- 



canvas 


width-20 


canvas .height-40 [_) '• 

^ -to d\raw -this lex-t ai 10 
Hgh-t Side Jc -the 

T\rorw the bottom o*p 七 |^ tayw/Bs, so ii 
bdbhdcs "the "top lihC o-p "tex-t. 


fillCircle 


Lc-f-bovcv 
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exercise solutions 



See if you can piece together the drawBird function from all the pieces Judy gave us. 
The drawBird function takes a canvas and context, and draws the bird onto the canvas 
You can assume that with this function we’re placing “twitterBird.png” at the location 
x=20, y=120, with a width and height of 70. We’ve written the method declaration and 
the first line for you. Here’s our solution. 


function drawBird(canvas, context) { 
var twitterBird = new Image(); 

y ouV - codt Kcv-c *twi*t*tc\rBiv-d.s\rd =■ 

*twi*t*tcv-Bi\rdi.Ohloadi ==■ -fuhd*tior\0 { 


Do" 七 -Povyt add a 

ddll bo dva>wBi\rd \y\ youv 
p\rcvicy/tta^dllcv-| 


dorrtc>ct.dbraw|ir^e(*bwi*t*(wBiv*d, 2*0, 120 , 10 , 10 )] 



HTML5cross Solution 
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out your inner artiste 


So, you’ve made the perfect TweetShirt preview — now 
what? Well, if you really want to make a t-shirt out of your 
design, you can! How? Here’s a little extra bonus to add 
to your code — a TweetShirt “easter egg’’ if you will — that 
will make an image out of your design, all ready for you to 
upload to a site that will print an image on a t-shirt for you 
(there are plenty of them on the Web). 

How can we do this? It’s simple! We can use the 
toDataURL method of the canvas object. Check it out: 




， ve r^adc a hew -Puhdtioh, rmakel^aac, 

"to add this -Puhdtiohali-ty. 


function makeImage() { 

var canvas = document.getElementByld( n tshirtCanvas n ); 
canvas.onclick = function () { 

window.location = canvas.toDataURL("image/png"); 




l/Vfe set the bvowsev- window 
lo^cltioh -to -the thats 

so you II see a bv*owscv* 
page with just the image \v\ it. 



WicVc ask” ta^vas *to 
tvca*tc a d 

pixels dbravm tar>vas. 


Now, just add a call to makelmage in the window onload function and your 
canvas is now enabled to make an image when you click on it. Give it a try. 
And let us know if you make a tshirt! 


Wlc ^vdb ta^vas objcd*t••• 
3idd dh 

h^hdlcv- so that 
wheh you di 乙 k oh "the 
^dhVols ； i-fc dv-catcs 

the 


Hotc ihai is -the 
OY\\y -fov-rwa-t "tha-t rnus-t be 
supported by bv-owsev-s, so v/c 
\rcdorif\rwc^d you use it 


window.onload = function() { 

var button = document.getElementByld("previewButton") 
button.onclick = previewHandler; 
makelmage(); 

j 一 Call rwakcUagc -fco add the didc 

handler* to 七 he Cdvw/ss, and 

you\r casic\r is domplcic- 



Some browsers won’t let you grab an image from 
the canvas if you’re running the code from file://. 

Run this code from local host:// or a hosted server if you want 
it to work across all browsers. 
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參 


Video 


MMM 


with special guest star “Canvas” 





We don’t need no plug-in. After all, video is now a first-class 
member of the HTML family — just throw a <video> element in your page 
and you’ve got instant video, even across most devices. But video is far 
more than just an element, it’s also a JavaScript API that allows us to control 
playback, create our own custom video interfaces and integrate video with 
the rest of HTML in totally new ways. Speaking of integration... remember 
there’s that video and canvas connection we’ve been talking about — you’re 
going to see that putting video and canvas together gives us a powerful 
new way to process video in real time. In this chapter we’re going to start by 
getting video up and running in a page and then we’ll put the JavaScript API 
through its paces. Come on, you’re going to be amazed what you can do with 
a little markup, JavaScript and video & canvas. 
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announcing webville television 


Meet Webville TV 

Webville TV — all the content you’ve been 
waiting for, like Destination Earth, The Attack of the 
50’ Woman, The Thing, The Blob, and it wouldn’t 
be beyond us to throw in a few ’50s educational 
films. What else would you expect in Webville? 
But that’s just the content, on the technology 
side would you expect anything less than 
HTML5 video? 

Of course, that’s just the vision, we have 
to build Webville TV if we want it to be a 
reality. Over the next few pages we’re going to 
build Webville TV from the ground up using 
HTML5 markup, the video element and a little 
JavaScript here and there. 


Webville TV 
bull 七 v/’rtii 100% 

七杜 Vmolo 汾 . 




Comih^ -fco B 
b\rov/sc\r heav- 
you sooh/ 
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not your father’s tv 


The HTML, Icfs get it done... 


Hey this is Chapter 8, no lollygagging around! Let’s jump right in and create some HTML: 



<!doctype html> 

<html lang= n en n > 

<head> 

<title>Webville TV</title> 
<meta charset= n utf-8 n > 

<link rel= n stylesheet” href: 
</head> 

<body> 

<div id= n tv n > 

<div id="tvConsole"> 


Pve 七七 丫 s*t 3 r>dav*d 


CSS -f ile 

{p make rt all look y>*idc. 

'webvilletv. css n > 


Jus*t a 

\x> hclf make *rt look 
like a -television set 




<div id=”highlight n > 

<img src="images/highlight.png" alt= M highlight for tv n > 

</div> 

<div id= n videoDiv n > 

〈video controls autoplay src= n video/preroll.mp4 M width= n 480" height= n 360 
poster= n images/prerollposter.jpg" id="video M > 

</video> 

</div> 


</div> 

</div> 

</body> 

</html> 


^ ^[Y\A hcvVs OUV <Vldco> dcmCir>*t 

(or ou\r video. Well *takc a 

dloscv- look'm 3 set .. 


Plug that set iw awd test it out ... 琢 


l-f youVc Kavm^ issues, —^ 
七 uv 灼 fay! 


You need to make sure of a few things here: first, 
make sure you’ve got the code above typed into a file 
named webvilletv.html; second, make sure you’ve 
downloaded the CSS file, and finally, make sure you’ve 
also downloaded the video files and placed them in a 
directory named video. After all that, load the page 
and sit back and watch. 

Dow^lodd cvcv-yth'mg -fv-om http://widkedlysmav " 七 dom/ivfhtml 弓 


ttevVs what sec- 

Notidc i-f you hovcv- 
youv mouse ovcv 
strttY\ you 3 sc*t 

do^-tvols, y/Widh you 

use b> pause, flay, 
sc*t 七 k audio ov seek 
dv~ouy>d m *tV>C video- 
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video formats can cause issues 


By 七 ^ tiwc y ou 
矿 cadi *tWis, 七 hcse 
-(*ov*w3*ts tould 
be wov-c Widely 
su^ovtcd 3tv*oss 
all Woy/scv-s. £o 
i-f youv videos 

Y/ov-k'm^, yca*b. 

*bV)C 

Wefe *bo see *b^c 
U4 ： cs*t OY\ 七 Wis 


uy\-fold'm5 
I\y\A v/cll 

ba 乙 k *fov wov-c ov\ 

-bWis bo^\c sW 七 1 丫 


not seeing any video. Ive 
triple checked the code and 
I have the video in the right 
directory. Any ideas? 


Yes, it’s probably the video format. 

While the browser makers have agreed on what the 
<video> element and API look like in HTML5, not 
everyone can agree on the actualformat of the video files 
themselves. For instance if you are on Safari, H.264 
format is favored, if you’re on Chrome, WebM is favored, 
and so on. 


In the code we just wrote, we’re assuming H.264 as a 
format, which works in Safari, Mobile Safari and IE9+. 
If you’re using another browser then look in your video 
directory and you’ll see three different types of video, 
with three different file extensions: “.mp4” ， “.ogv”，and 
.webm’’ （ we’ll talk more about what these mean in a bit). 


U 


For Safari you should already be using .mp4 (which 
contains H.264). 

For Google Chrome, use the .webm format by replacing 
your sre attribute with: 

src="video/preroll.webm" 



If you’re using Firefox or Opera, then replace your sre 
attribute with: 

src= n video/preroll•ogv M 

And if you’re using IE8 or earlier, you’re out of luck — 
wait a sec, this is Chapter 8! How could you still be using 
IE8 or earlier? Upgrade! But if you need to know how to 
supply fallback content for your IE8 users, hang on, we’re 
getting to that. 



-this a i^ry ^ 

y° u a h d 

匕 “3 b^k-to 

this ih a bit. 
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not your father’s tv 


How does the video element work? 

At this point you’ve got a video up and playing on your page, but before we move on, 
let’s step back and look at that video element we used in our markup: 


r 

<video controls 
autoplay 


l-P toyrbroU causes 

七 he playcv- *to supply doy>*t\rols -fov- 6oyrbrollm3 
七 he video dr>d audio pbybadk. 

TKc au*boflay atbr’ibu 七 e dauscs -the 
video *to s*tav*t flaybadk ufo^ pay load- 

匕 The souvdc lodd'kioh o( -the video. 


src= n video/preroll .mp4 ▼’ 
width= n 4 8 0 n height: n 3 60 11 
poster= n images/prerollposter.jpg" 


The width hcijlvt o-f 
the video *m the page. 


id=”video ”〉 A poster irn^e -to show whe, the 

</video> J ⑽ vie is 七 pbyi^. 

id -fo\r the video dcrwChi so 
wc i-fc btev- -fvorw 

JavaScript. 








The HTML5 Guide to 
Construction 

City of "WebviUe 



Good Video Etiquette: 
The autoplay property 

While autoplay may be the best thing 
for sites like YouTube and Vimeo (or 
WebvilleTV for that matter), think twice 
before setting it in your <video> tag. 

Often, users want to participate in the 
decision of whether or not video is 
played when they load your page. 


you are here ► 


353 










overview of video attributes 


Closely inspecting the video attributes... 

Let’s look more closely at some of the more important 
video attributes: 



The controls attribute is a 
boolean attribute. It’s either 

there or it’s not. If it is there, 

then the browser will add its 
built-in controls to the video 
display. This varies by browser, 
so check out each browser to, 
see what they look like. Here s 
what they look like in Safari. 


SPC 


s\rd is what video 
-Pile is used hcv-c. 



a 卿 Jay 

The autoplay boolean attribute tells the 
browser to start playing the video as soon 
as it has enough data. For the videos we，re 
demoing with, you ，U probably see them 
start to play almost immediately. 


The browser will typically display one frame 
of the video as a “poster” image to represent 
the video. If you remove the autoplay 
attribute you’ll see this image displayed 
before you click play. It’s up to the browser to 
pick which frame to show; often, the browser 
will just show the first frame of the video... 
which is often black. If you want to show a 
specific image, then it’s up to you to create an 
image to display, and specify it by using the 
poster attribute. 




Another boolean attribute, loop automatically 
restarts the video after it finishes playing. 


/id*th 


TV v\dco playcv 


The sre attribute is just like the <img> element^ 
sre — it is a URL that tells the video element where 
to find the source file. In this case, the source is 
video/preroll.mp4. (If you downloaded the code 
for this chapter, you’ll find this video and two 
others in the video directory). 

prel^a^ 

The boolean attribute preload is typically 
used for fine-grained control over how 
video loads for optimization purposes. 
Most of the time, the browser chooses 
how much video to load, based on 
things like whether autoplay is set and 
the user’s bandwidth. You can override 
this by setting preload to none (none of 
the video is downloaded until the user 
“plays”)，metadata (the video metadata is 
downloaded, but no video content), and 
auto to let the browser make the decision. 



width, h^ht 


The width and height attributes set the width and height of the 
video display area (also known as the “viewport”). If you specify 
a poster, the poster image will be scaled to the width and height 
you specify. The video will also be scaled, but will maintain its 
aspect ratio (e.g. ， 4:3 or 16:9) so if there’s extra room on the 
sides, or the top and bottom, the video will be letter-boxed or 
pillar-boxed to fit into the display area size. You should try to 
match the native dimensions of the video if you want the best 
performance (so the browser doesn’t have to scale in real time). 


Pi I lav* - bo 乂 


> 


.一 box’mg 
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Yes, the controls in each 
browser are different with 
HTML video. 

The look and feel of your controls is 
dictated by those who implement the 
browsers. They do tend to look different in 
different browsers and operating systems. 

In some cases, for instance, on a tablet, they 
have to look and behave differently because 
the device just works differently (and it’s 
a good thing that’s already taken care of 
for you). That said, we understand; across, 
say, desktop browsers, it would be nice to 
have consistent controls, but that isn’t a 
formal part of the HTML5 spec, and in 
some cases, a method that works on one 
OS might clash with another operating 
system’s UI guidelines. So, just know that 
the controls may differ, and if you really 
feel motivated, you can implement custom 
controls for your apps. 


Wc II do *tK*is latcv-. 
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video format overview 


What you weed to know about 
video formats 

We wish everything was as neat and tidy as the video 
element and its attributes, but as it turns out, video 
formats are a bit of a mess on the Web. What’s a video 
format? Think about it this way: a video file contains 
two parts, a video part and an audio part, and each part 
is encoded (to reduce size and to allow it to be played 
back more efficiently) using a specific encoding type. 

That encoding, for the most part, is what no one can 
agree on — some browser makers are enamored with 
H.264 encodings, others really like VP8, and yet others 
like the open source alternative, Theora. And to make 
all this even more complicated, the file that holds the video 
and audio encoding (which is known as a container) has 
its own format with its own name. So we’re really talking 
buzzword soup here. 

Anyway, while it might be a big, happy world if all 
browser makers agreed on a single format to use across 
the Web, well, that just doesn’t seem to be in the cards 
for a number of technical, political, and philosophical 
reasons. But rather than open that debate here, we’re 
just going to make sure you’re reasonably educated on 
the topic so you can make your own decisions about 
how to support your audience. 

Let’s take a look at the popular encodings out there; 
right now there are three contenders trying to rule the 

― 士 ) world ". ^ m.lea^ -ay va^y by the 

time you vead this book, as 
-favoved cr>dod*m^s xo 
ovcv- 


Thv-cc video 

-fovma*U m use advoss 
-the majov bv-o>MSC\rs. 


厂 Tii'is is a 
/ doyrtaiw … 



… 七 ha 七 
tovrtams a 
Video dir>d 
a 於 audio 

video 


-foVma*t doy>s*is*b of a 
toY\ia'\Y\tr -type 0'ikc Wcb/l/I, 
/ 1 /IP^ av>d O 55 ) aiy\A a video 

ar>d audio Hike \/P 它 

av\A Vovbis). 


Tke HTML5 specification allows lor any video ioritiat. 
It is tke browser implementation tkat ctetermines wkat 
iormats are actually supported. 
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The cowtcwdcrs 

The reality is, if you’re going to be serving content to a wide spectrum of users 
you’re going to have to supply more than one format. On the other hand, if all 
you care about is, say, the Apple iPad, you may be able to get away with just one. 
Today we have three main contenders — let’s have a look at them: 


MP4 container with 
H.Z64 Video and AAC Audio 

H.264 is licensed by the MPEG-LA 
group. 

There is more than one kind of 
H.264; each is known as a “profile.” 

MP4/H.264 is supported by Safari 
and IE9+. You may find support in 
some versions of Chrome. 


WebM container with 
VPS Video and Yorbis Audio 

WebM was designed by Google to 
work with VP8 encoded videos. 

WebM/VP8 is supported by Firefox, 
Chrome and Opera. 

You’ll find WebM formatted videos 
with the .webm extension. 



Ogg container with 
Theora Video and Yorbis Audio 


Theora is an open source codec. 

Video encoded with Theora is 
usually contained in an Ogg file, 
with the .ogv file extension. 

Ogg/Theora is supported by 
Firefox, Chrome and Opera. 


广 

\/P^, 


badked by ^oo^lc, 
suffov-ted by o*tV>cvs 
diad oy \ s*t\ror>^... 




W.2.^ *thc ^ 

*mdus*tv-y davlm% 
bu 七 y>o*t 七 he 

m 


Thcova. TV>c o^tv\ 

souvdc al*tcv-y>a*twc. 

ii . 


you are here ► 


357 



























managing video formats 


How to juggle all those formats 


So we know it’s a messy world with respect to video format, but what to do? Depending 
on your audience you may decide to provide just one format of your video, or several. In 
either case, you can use one <source 〉 element (not to be confused with the src attribute) 
per format inside a <video 〉 element, to provide a set of videos, each with its own format, 
and let the browser pick the first one it supports. Like this: 


Notice verwovm^ svt 
a*t*tv»bu*tc -fv-om <vidco> … 



… ahd add'm0 -thv-cc souv-dc 

with theiv" owh 

sv_ ^ y/i-th a 

▽Clrsioh o*p 七 he video ih 3 



〈video sre= n video/preroll.mp4 M id= n video" 

poster="video/prerollposter.jpg" controls 
width= M 480" height= M 360 n > 

<source src= n video/preroll.mp4 n > 

<source src="video/preroll.webm M > 

<source src= n video/preroll•ogv"> 

<p>Sorry, your browser doesn't support the video element</p> 


f 


</video> 



This is what the 
b\rowsc\r shows i-f i-fc 
doesh t suf>po\rt video. 


TV,e Wo.se, ^ 

Jfovmat •七 1 

Pov- cadK souvdc bvov/sev- loads 七 he 
metadata o-f *tKc video -file *to see i-f *i*t 
c ^ y \ play i*t (wKidK dav> be a lcr>^*tKy pvodcss, 
v/e ddv> r^akc i*t casicv- oy \ *tKc 
bvov/sev* … see "tKc fay). 





BULLET POINTS 


■ The container is the file format that’s used to package up the video, audio 
and metadata information. Common container formats include: MP4, 
WebM, Ogg and Flash Video. 

■ The codec is the software used to encode and decode a specific encoding 
of video or audio. Popular web codecs include: H.264, VP8, Theora, AAC, 
and Vorbis. 

■ The browser decides what video it can decode and not all browser makers 
agree, so if you want to support everyone, you need multiple encodings. 
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How to be even more specific with 
your video formats 


Telling the browser the location of your source files gives it a selection of 
different versions to choose from, however the browser has to do some 
detective work before it can truly determine if a file is playable. You can help 
your browser even more by giving it more information about the MIME type 
and (optionally) codecs of your video files: 


The -file you use m s\rd is dd'tudlly 
d toirrta’mcv" -Pov- ad*tudl video 
(and audio and some me 七 add 七 a). 


<source src= n video/preroll.ogv' 


T\\t Video CoAcC- 


"HiC todtCs spc^i-Pics 

whidli Codtts y/c\rc used -fov 
c^od'mg -the video and audio -to 
the eroded video -file. 

I 

type='video/ogg; codecs= M theora r vorbis"'> 



Tiic audio doded- 


Type is 如 op-tiohal aUv-ibu-tc 
七 ha 七 is a "to "the blrowscv* 
"to help it -Piguv-c out i-P it 
play this kihd o-P -Pile. 


p 

TWis is hit IA\IAt 
o*f *tV^ video -f ile- l*t 
spcC-i-f ics *tV^c C.oy\*t3mcv 

七 . 




7 1 


hi o*ti£.c the double Quotes or> CodtCs 
pa\ranr»c*tcv. This rwcahS y/c need "to u 试 

avou^d the type attvibuic. 


We can update our <source> elements to include the type information for all 
three types of video we have, like this: 


〈video id= n video" poster= n video/prerollposter.jpg" controls width= M 480 M height= n 360 
<source src= n video/preroll.mp4 n type='video/mp4; codecs= n avcl•42E01E, mp4a.40.2 
<source src="video/preroll.webm" type='video/webm; codecs= n vp8, vorbis"'> 
<source src= n video/preroll•ogv" type='video/ogg; codecs= M theora, vorbis"'> 
<p>Sorry, your browser doesn't support the video element</p> 

</video> 

( "flic todtCs -foV wvP^" 3V"C move dorwpli£.3*tcd 

. ^ , a I . ii p.i „ w 


> 


l*f you do /七 khow the codecs the 灼 

you leave therw off jus-t use the MIME 
type- li will be a little less C-P-fidiChi, bui rwosi 
o\ ihc time, that’s okay. 


i\\tr *tv/o because suppo^rb various 

di-f-fcv-cy>*t c^tod'm^s -fov di-f-rcvcr>*t uses (like Ki^ 
bar\dv/id*tK vs. lov/ ba”d>w’id*W. So, "to yt *t^osc 
you’ll v\ttd *to kir^oy/ move details abou*t ^\o^n youv 
video y/as eroded- 


> 


If and when you do your own video encoding, you’ll need to know more 
about the various options for the type parameters to use in your source 
element. You can get a lot more information on type parameters at 
http :// wiki.whatwg.org/wiki/Video_type_parameters. 
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questions about video encoding and playback 



Dumb Questi 


9ns 


Is there any hope of getting to one 
container format or codec type in the 
next few years? Isn’t this why we have 
standards? 

A- 

r \* There probably won’t be one encoding 
to rule them all anytime soon—as we said 
earlier, this topic intersects with a whole host 
of issues including companies wanting to 
control their own destiny in the video space to 
a complex set of intellectual property issues. 
The HTML5 standards committee recognized 
this and decided not to specify the video 
format in the HTML5 specification. So, while 
in principle HTML5 supports (or is at least 
agnostic to) all of these formats, it is really up 
to the browser makers to decide what they do 
and don't support. 


Keep an eye on this topic if video is important 
to you; it will surely be an interesting one to 
watch over the next few years as this is all 
sorted out. And, as always, keep in mind what 
your audience needs and make sure you're 
doing what you can to support them. 

If I want to encode my own video, 
where do I start? 

A- 

There are a variety of video capture 
and encoding programs out there, and which 
one you choose is really going to depend 
on what kind of video you’re capturing and 
how you want to use the end result. Entire 
books have been written on video encoding, 
so be prepared to enter a world of all new 
acronyms and technology. You can start 


simple with programs like iMovie or Adobe 
Premiere Elements, which include the ability 
to encode your video for the Web. If you’re 
getting into serious video work with Final 
Cut Pro or Adobe Premiere, these software 
programs include their own production tools. 
And, finally, if you are delivering your videos 
from a Content Delivery Network (CDN), 
many CDN companies also offer encoding 
services. So you’ve got a wide variety of 
choices depending on your needs. 

Can I play my video back 
fullscreen? I am surprised there isn't a 
property for this in the API. 

A- 

That functionality hasn’t yet been 
standardized, although you’ll find ways to do 
it with some of the browsers if you search 
the Web. Some of the browsers supply a 
fullscreen control (for instance, on tablets) 
that give the video element this capability. 
Also note that once you’ve got a way to go 
fullscreen, what you can do with the video, 
other than basic playback, may be limited 
for security reasons (just as it is with plug-in 
video solutions today). 

What about the volume of my 
video? Can I use the API to control the 
volume level? 

A- 

厂 V You sure can. The volume property can 
be set to an floating point value between 0.0 
(sound off) to 1.0 (sound the loudest). Just 
use your video object to set this at any time: 

video.volume = 0.9; 
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YOUR ^ XT MISSION ： 

VX^O BECO^XSS^CE 

BELOW (HINT, 


10 P SFC IU 5 I 

BROWSER 



7XDEO vTDE0 XU EACH BROW 娜 

SS^Ssss 3 &s 〒二一 . 

二 .: //c 抓二 S bS 娜 ㈣ 二 ： r A next assig 祕 NT ’ 

SSToUK-^ - — RT ^ i0S and M .，d d.- oW 


■p 


V 


(U 


H 


H 




Video 


H.264 
VQebM 

ogg 

Theora 
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supporting flash video 


I think Flash video is still 
important and I want to 
make sure I have a fallback 
if my users* browsers doiVt 
support HTML5 video. 



No problem. 

There are techniques for falling back to another 
video player if your preferred one (whether that 
be HTML5 or Flash or another) isn’t supported. 

Below you’ll find an example of how to insert 
your Flash video as a fallback for HTML5 video, 
assuming the browser doesn’t know how to play 
HTML5 video. Obviously this is an area that is 
changing fast, so please take a look on the Web 
(which is updated a lot more often than a book) 
to make sure you’re using the latest and greatest 
techniques. You’ll also find ways to make 
HTML5 the fallback rather than Flash if you 
prefer to give Flash video priority. 


<video poster= n video.jpg" controls 〉 
<source src="video.mp4 n > 
<source src="video.webm"> 
<source src="video.ogv n > 
<object>...</object> 

</video> 


|nscv*t youv <objcd*t> elemorrt 'msidc 
<v*idco> element l-P bvoy/sev- docs^t 
ky>OY/ abou 七 <V*idco> element 

<objct*t> v/ill be used- 
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I was told there would be APIs? 


As you can see, you can do a lot using markup and the 
〈 video 〉 element. But the 〈 video〉element also exposes 
a rich API that you can use to implement all kinds of 
interesting video behaviors and experiences. Here’s a quick 
summary of some of the methods, properties and events 
of the <video> element you might be interested in (and 
check the spec for a comprehensive list): 



Use these Properties 


victeoWicitk 

loop 

viJeoHeigkt 

muteci 

currentTime 

paused 

cturation 

reactyStat 

"7( enJed 

seeking 

L error 

volume 

These ave all pv-opcv*-tics o( 

七 he <vidco> clcrnc^*t object 

Sorwc you c^y\ sci (like loop and 
rwu-ted); some av-c \read only 
(like 匕 u\r\rerrt 丁 ime di^d C\rv-ov-). 



Call these Methods 


plays youv- video 
^ . pauses youv- video 

loads youv video 


play 
pause 
loact 


ranPlavTvtie hcl P s Y ou 

can^lay 沾 一⑽诎 以 

\ video -types 
you cav\ play, 
pv-oj\rarwmaiidally 









^featch these Evewts 


/Wd tV^csc a^rc all events you 
cav\ Virile vf you y/airrb by 
dddm^ cvcr\*t V^air\dlcv-s 
called y/iicir\ *t^c cvcr\*b you v-c 
ris*tcir\'m5 -fov 


play 

abort 

pause 

waiting 

progress 

loactectctata 

error 

loactectnietaciata 

timeupetate 

volumecliangfe 

encteci 
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how a playlist works 


A little cowtewt "programming" ow Wcbvillc TV 

So far we’ve got one single video up and running on Webville TV What we’d really 
like is a programming schedule that serves up a playlist of videos. Let’s say we want 
to do this on Webville TV: 



Show a little preshow to the audience, 
you know, the Coke and popcorn ads, 
the audience etiquette, and so on... 


Show our first feature, titled Are you 
Popi//ar?Trust us, you'll enjoy it. 


And then show our featured 
presentation, Destination Earth, 
presented in full technicolor. Created 
by the American Petroleum Institute, 
what on earth could be their 
message? Watch and find out. 


^Sharpen your pencil_ 

Now you might be tempted to look at the 〈 video〉markup specs to see how you specify a playlist, 
but for this you're going to need code because the <video> element allows you to specify only one 
video. If you were on a desert island and had to implement a playlist with only the browser, the 
<video> element, the sre property, the load and play methods, and the ended event, how would 
you do it (you can use any JavaScript data types you like): 


J u s*t a ihc tv\dtd a video 

cir>d s*fcops flay you 

tav\ Kave a hav>dlcv- dallcd ⑶七 his a*t 

ihc dv\SY/crH 
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i^arpen your pencil 


{Me loads >wc se 七 uf 
a playlis-t av-vay, s-tav-t the 仑 《 七 
video playm^, sc*t uf av> cv ⑶七 
Kdy>dlev- y/h ⑶ i 七 s*tofs. ^ 


Now you might be tempted to look at the 〈 video〉markup specs to see how 
you specify a playlist, but for this you’re going to need code because the <video> 
element allows you to specify only one video. If you were on a desert island and 
had to implement a playlist with only the browser, the <video> element, the sre 
property, the load and play methods, and the ended event, how would you do it 
(you can use any JavaScript data types you like)? Here’s our solution: 


Playlist Pseudo-code 


ttevVs V>o>w >wcVc *to s*tovc 
-the flayl*is*t, as av\ av-vay. 
i*tcm is a video *fco flay- 




Create array of playlist videos 

Get video from DOM 

Set event handler on video for 
“ended” event 





c 




c 


Create variable position = 0 

Set video source to playlist position 0 

Play the video 






/ 


/ 


Playlist Array 


Ended 

Event 


£vcv-y time a video 
•the eddied ey/emi 


ttevVs ouv ha^dlcv* *to deal 

video 


odduvs. 



... v/h'ldh ddlls 
tv\dtd cv/crrt hay>dlcv-. 


Ended Event Handler Pseudo-code 

Increment position by one 
Set video to next playlist position 
Play the next video 


W\\tv\ wc get *to 七 he 
o-f ouv playl'is-t 

>wc ta 灼 erthev s*fcof, o\r 
loof av-our>d *bo 七 he 
•f ivs 七 video. 
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implementing a playlist 


Implementing Wcbvillc TV's playlist 

Now we’re going to use JavaScript and the video API to implement the Webville TV 
playlist. Let’s start by adding a link to a JavaScript file in webvilletv. html; just 
add this into the <head> element: 

<script src=" webville tv. js"X/script> 

And delete this from your existing〈video〉element: 

〈video controls auto p lay src = n vid e o/ p r e roll. mp4 11 width= n 480 n height= n 360 n 

poster="images/prerollposter. jpg" id=”video”> ^ IVcVc vcmovmj au-toflay a^d srt 
〈 /video 〉 Ts^ ativ-ibutcs -Pv-om 七 he <vidco> taj. 

Also v-cmovc <souv-dc> clcmc^-ts you 
have v/'rth- 


Now, create a new file webvilletv. j s, and let’s define a few global variables 
and a function that will be called when the page is fully loaded: 


var position = 
var playlist; 
var video; 


f**ivs*t lets dc-fme 3 vav'iablc *to keef "tv* 3 dk o-f v/hi£.V> video 
y/cVc yjt\\ Y\din\t 七 his position. 

^ /W we r\ttd a variable -to hold -the video playlist av-vay. 

^ - - also a vav-iablc b> hold a b> i\\t video element 


e- 

0 ； 


window. onload = function () { set uf ouv- playlist v/"rth *th\rCC videos, 

playlist = ["video/preroll.mp4 M , 

n video/areyoupopular. mp4 , 
n video/destinationearth. mp4 '▼]; 

video = document. getElementByld ("video") "tKc video clement 

video.addEventListener("ended", nextVideo , false); 

^ add a hay>dlcv* -fov* video 〜 ⑼七 .*this looks di«ev ■ ⑼七七 1 ^灼 

y/hd 七 v/cVc used *to 一 iiold or\ oy>c scd> v/C II *t^lk abou 七七 iVis on 七 1^ 加乂七 

video • sre = Playlist [position] ; ^ ^ ^ ^ ^ ^ 

video.load(); 

video.play () ; A^d load the video a^d play ,£/ 
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So whafs up with that evewt handler code? 

In the past we’ve always just assigned a handler function to be called when an event 
occurs to a property (like onload or onclick) like this: 

video.onended = nextVideo; 


However, this time we’re going to do things a little differently. Why? Because at the time 
we’re writing this, support for all the event properties on the video object are a little 
spotty. That’s okay; that deficiency is also going to allow us to show you another way of 
registering for events: addEventListener, which is a general method supported by 
many objects for registering for various events. Here’s how it works: 


>u use -the addlEvc^-tLis-tc^cv mc-thod 
•bo add ha^dlcv-. 




This is the v/cVc 50^5 

-to ta\\ *tV^c V^apfcr\s. 




This is -the object 
oy\ whidh wc \rc 
lis-tchih^ -fov -the 


video.addEventListener("ended ", 

This is 七 he everrt y/cVc -Pov-. ^ 

Notice v/c do" 七 pu 七 an w oir/’ bc-fo\rc 七 he 
eve 的七 name like v/c do wi-th -that 

wc sc*t wrth p\ropc\rtics (like onload)- 


nextVideo , false); 

The *thiv*d fav-amc*tcv- don*tv*ols some adva^ded methods 
o( events i-p i*t is sc*t *to *tv*uc- Unless you’ve 

wv-itmg adva^ded todt youll always sc*t this *to -false. 


Other than the fact the addEventListener method is a little more complicated 
than just adding a handler by setting the property to a function, it works pretty much 
the same way. So let’s get back to our code! 


How to write the "ewd of video" handler 

Now we just need to write the handler for the video’s ended event. This handler is ^ 
going to be called whenever the video player hits the end of the current video file. 
Here’s how we write the nextVideo function (add it to webvilletv. j s): 


function nextVideo() { 

position++; 



Fi\rs*b, m 匕 ircmc 的七 the position 
•m -the playlist a\rv-ay. 


Ko*tc *thc y/o^ ； *b 

be called i-f the usev- 
pauses video ov- i-f 
video is (whidh 

you tBY\ do by settmj the 
loop pv-opc\rty). 


if (position >= playlist.length) { 


position 


0 


f\Y\A i-f v/c hit the o-f the 
list ； v/cll just loop bddk av-ou^d by 
settmg the position *to z^\ro 


video, sre = playlist [position] ; < - |s/ ow | c ^s set the souirdc o( 

■the playev- b> the ^c^*b video. 


video.load(); 
video.play(); 


-fmally^ lets load a^d stav-t 
the new video play'mj. 
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testing the playlist 


Another test drive... ^ 


Gan you believe we’re ready for a test drive? All we 
did was use the API to set up a video to play, then we 
made sure we had an event listener ready to handle the 
situation when the video ends, which it does by starting 
the next video in the playlist. Make sure you’ve got the 
changes made to your HTML file, type in your new 
JavaScript code and give it a test drive. 


rteves ' scc 七 1 J: 二 f 

▲ L ， 讪士 sW 



It works! But how do we 
decide which video format 
to play when were using code to 
load the video source? 



Good question. 


When we were using multiple source tags we could count 
on the browser to sort through one or more video formats 
and decide if it could play any of them. Now that we’re 
using code we’re just giving the video element a single 
option. So how do we test to see what the browser supports 
to make sure we supply the best format? 


Ve do that using the canPlayType method of the video 
bject. canPlayType takes a video format and returns a 
tring that represents how confident the browser is that it 
an play that type of video. There are three confidence 
: vels: probably, maybe or no confidence. Let’s take a closer 
)ok and then rework the playlist code to use this. 片 

/Wc you sdva-Uh'mj youir head say'mj w pvobably? r^aybe?) 
why does / 七 rt v-ctuv-h ivuc o\r *falsc? w Us -too, but y/ell 30 
-thiroujh y/hat this \ y \ a sed". 
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How the cawPlayTypc method works 

The video object provides a method canPlayType that can determine how likely 
you are to be able to play a video format. The canPlayType method takes the same 
format description you used with the < source 〉 tag and returns one of three values: 
the empty string, “maybe” or “probably”. Here’s how you call canPlayType: 


|-f wc pass jus 七 the sho\rt af a 七七 he 的 

wc 匕 扣 only ww or “maybe” as a v-csult 

video.canPlayType( n video/ogg n ) 
video.canPlayType('video/ogg; codecs= M theora, vorbis"') 





But i-f wc pass i\)C spedi-f id type with a Codec, y/c 你 i # 七 
七 heh jet 10 , w nr»aybc w ov “probably” as an a^sv/ev. 


Empty string if the 
browser knows it cant 
play the video. 

The string ''maybe” if the 
browser thinks it can 
possibly play the video. 

The string ''probably" if 
the browser is confident 
it can play the video. 


Notice that the browser is only confident beyond “maybe” if you include the codec 
parameter in the type. Also notice that there’s no “I’m absolutely sure” return value. 
Even if the browser knows it can play a type of video, there’s still no guarantee it can 
play the actual video; for instance, if the bitrate of the video is too high, then the 
browser won’t be able to decode it. 



Putting canPlayType to use 


is o( brts 

七 he bvoy/sev \\as bo pvodcss fev 
urM*t o*f *to dttodc 
video a^d display \i tovvc^ly. 


We’re going to use canPlayType to determine which video format to use for Webville TV 
videos — you already know that we have three versions of each file: MP4, WebM and Ogg, and 
depending on which browser you’re using, some will work and some won’t. Let’s create a new 
function that returns the file extension (“.mp4” ， “.webm” or “.ogv”）that is appropriate for 
your browser. We’re going to use only the MIME types ("video/mp4 ", "video/webm" and 
"video/ogg") and not the codecs, so the only possible returns values are “maybe” and the 

empty string. Here^s the code: 鷗 k 謂 ‘II 。七 ㈣ a,d 

/ -- empty S*b\rm^ as a^sy/C\rs ; so wc II just 

function getFormatExtension () { ^ make suv^ our maHmg type docs / 七 

if (video.canPlayType ("video/mp4 n ) !='"▼){ v-csult m By\ cw'p'ty 


return n .mp4"; 

} else if (video.canPlayType("video/webm") !=' 

return '▼. webm"; 

} else if (video.canPlayType("video/ogg") !="' 

return n .ogv M ; 

} T p most use i-p you do^i khow 


){ \ iVe "bry cadh o( the types, 

^T~ 'rcWh the -file 


C>c-tc^sioh i-P the b\rowscv says, 

“Maybe I support that” 


(the Codecs, i-ts good Chough -to be 
r»»aybc W doh-pidch-fc. 
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dealing with formats again 


Integrating the gctForwatExtensiow function 


Now, we need to make some changes to the window. onload and 
nextVideo functions to use getFormatExtension. First, we’ll remove 
the file extensions from the filenames in the playlist (because we’re going to 
figure those out using getFormatExtension instead), and then we’ll call 
getFormatExtension where we set the video . sre property: 


window.onload = function() { 

playlist = [’ ▼ video/preroll，▼, 

"video/areyoupopular ", 
"video/destinationearth"]; 



Remove -f ile 

-f ou*t 


video = document.getElementByld("video"); 
video.addEventListener("ended", nextVideo,false); 
video.sre = playlist[position] + getFormatExtension(); 
video.load(); 
video.play(); 


the v-esuli 

o-P 5C*tFo\rnf»d-tEy.-tchsio^ "to the 
-Pov the video svd. 


And do the same thing in nextVideo: 


function nextVideo() { 

position++; 

if (position >= playlist.length) { 
position = 0; 

} 

video.sre = playlist[position] + getFormatExtension(); 
video.load(); 
video.play(); 


~ 、 Same -th'mg 


dohda-tchatc the ircsult o-P 

bo the 

video vet. 


And test drive... 




Add the canPlayType function and make the changes above, then reload 
your webvilletv. html file. Work? Now your code is figuring out the 
best format. If you want to know which video the browser chose, try 
adding an alert to the window. onload and nextVideo functions; add it 
at the bottom of each function, after video. play () : 

alert (" Playing ’▼ + video. currentSrc); 



Which file did your browser play? 
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tJieretcir 

)umb 


D 


If I’m programmatically setting the source of my video, 
and canPlayType says its a “maybe”，but yet the playback fails, 
how can I deal with that? 


A 


There are a couple of ways to approach this. One is to catch 
the error and give the video object another source (we’ll talk about 
catching errors at the end of this chapter). The other is to use the 


e no 

Questi 9 ns 

DOM to write multiple source tags into the video object at once (just 
as if you’d typed them into your markup). That way your video object 
has several choices and you don’t have to write more complex error 
handling code). We're not going to do that in this chapter, but it’s a 
way of giving your video object multiple choices and doing it through 
code, not markup, if you have advanced needs. 



. 

You may need to install 
QiifcWfme to play mp4 
video in Safan- 

Quicktime often comes 
installed by default, but 
if iVs not, you can download it from 

http://www. apple, com/quicktime/download/. 

_ - - - — 



it! 


®°°» ,e Chrome has extra 

Securit V ^strictions 

WatcK it! 

videoZ n LZ U ^ d ° ina Some 

loaded the web page as I °^ rdt,on ^f you 

s howfi,e://rather than htto /A ^ URL _ 

m the rest of this chaotpr^f ' k ° We，1 be doin 9 

^orkandyow„g et no indioaZVoi 

a%ZrentbmZer 

_ :: ―的 fr _ _„st' …. 




Make sure your server is serving video files with the correct 
MIME type. 


I Whether you're using your own local server, or running an app using video 
WatCh it ： from a hosted server, you need to make sure that the videos are being served 

correctly. If they're not, they might not work properly. 

If you're on a Mac or Linux using a local server, you're most likely using Apache. You can 
modify the httpd.conffile (if you have root access) or create a .htaccess file in the directory 

where your video files are stored, and add the following lines. 

AddType video/ogg •ogv 
AddType video/mp4 .mp4 
AddType video/webm .webm 

This tells the server how to serve files with those file extensions. 

You can install Apache on Windows, and do the same thing: For IIS servers, we recommend 
looking in the Microsoft online documentation for "Configuring MIME types in IIS. 
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our message to you 



At some point we have to treat you like a real developer. 

In this book we’ve (hopefully) helped you every step of the way~we’ve been 
there to catch you before you fall and to make sure that, in your code, your i’s 
were dotted and your t’s were crossed. But, part of being a real developer is 
jumping in, reading other peoples’ code, making out the forest despite all the 
trees, and working through the complexity of how it all fits together. 

Over the rest of this chapter we’re going to start to let you do that. Up next 
we’ve got an example that is the closet thing to a real web app we’ve seen so 
far, and its got lots of pieces, lots of API use and code that handles lots of real 
details. Now, we can’t step you through every single piece, explaining every 
nuance like we usually do (or this book will be 1200 pages); nor do we want 
to, because you also need to acquire the skill of putting all the pieces together, 
without us. 

Don’t worry, we’re still here and we’re going to tell you what everything does, but 
we want you to start to learn how to take code, read it, figure it out, and then 
augment it and alter it to do what you want it to do. So, over the next three chapters, 
we want you to dig into these examples, study them, and get the code in your 
head. Really... you’re ready! 
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Wc need your help! 

This just in... we just got the contract to build the ||OU VfdGO 

software for their new video booth. What on earth is that? Oh, just the latest 
HTML5-enabled video messaging booth — a customer enters an enclosed video 
booth and shoots their own video message. They can then enhance their video 
using real movie effects; there’s an old-time western sepia filter, a black & white 
film noir filter, and even an otherwordly sci-fi alien filter. Then the customer 
can send their message to a friend. We went ahead and commited us all to 
building the video interface and effects processing system for it. 

There’s a problem though. The video booths won’t be available for another 
six weeks, and when they arrive the code has to be done. So, in the meantime, 
we’re going to get a partly functional demo unit and a few test video files, and 
we’ll write all our code using those. Then when we’re done, the Starring You 
folks can just point the code to the just-captured real video. And of course, 
remember that all this has to be done using HTML5. 

So, we hope you’re in, because we signed the contract! 


Step m〆 “七 a Video, yve »*t a 士 /lc, 

扣 d s ⑼ d *to Y 鱗 
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checking out the starring you video booth 


Step inside the booth, lefs take a look... 

Below you’ll see our demo unit complete with a user interface. What we’ve got is a video screen 
where users will see their video played back. They’ll be able to apply a filter like “old-time 
western” or “sci-fl，” see how it looks, and when they’re happy, send it off to a friend. We don’t have 
record capability yet, so we’ve got the test videos to play with. Our first job is going to be to wire 
everything up so the buttons work, and then write the video filters. Before we get into all that, check 
out the interface: 


ttcvc's demo uht | 七 ’s yrt a ^\dto flay 吖 

m i\\t middle -fov videos, v 




Apply you\r -favov-itc old-time 

WCS-tc\rh (sepia), -film ^oiv 
da\rk) o\r s^i—fi (*mvc\rtcd video). 



The play, pause, loop 

a 灼 d rwutc doirrbrols. 



Choose a itsi Video. de 州。 

U^»*t V^as i^0 bo 
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Unpacking the l?emo Unit 


The demo unit just arrived via next day air and it’s time to unpack it. It looks like 
we’ve got a functioning unit with some simple HTML markup & Java Script written 
so far. Let’s have a look at the HTML first (videobooth. html). By the way, sit 
back; we’ve got a few pages of factory code to look through, and then we’ll get 
cracking on the real code. 

厂 WTML^ o( ^ou\rsc. /Ud all the s-tylma is 

<! doctype html> cW U 

<html lang=”en”> the CSS -file. 

<head> 

<title>Starring YOU Video Booth</title> 

<meta charset= n utf-8 n > 

<link rel= n stylesheet M href="videobooth.css M > 

<script src="videobooth. js M X/script> ^ - 

</head> 

<body> 

<div id= n booth M > 

<div id= n console"> 



hevVs -the JavaStirip-t -file, y/cVc 30 … 3 "to 

-to v/vitc rwos-t o( “is. Well take a 的 m-defth 
look, but i*t looks -thcy^vc jus-t -the Code bo 

ii 


<div id= n videoDiv"> 

<video id= M video 
</div> 

<div id="dashboard"> 

<div id= M effects"> 

<a class= n effect" 

<a class= n effect" 

<a class= n effect" 

<a class= M effect" 

</div> 

<div id="controls M > 

<a class= n control 
<a class= n control 
<a class= n control 
<a class= n control 
</div> 

<div id= M videoSelection"> 
<a class= M videoSelection 
<a class= n videoSelection 
</div> 

</div> 

</div> 

</body> 

</html> 


do 灼 tirol the but-fco^s oy \ so -fav... 

ttc\rc's the mam Vve 30 七七 he Console itsd-f, whidh looks like 

't is divided the video display a dashboavd, wi-th -thv-cc sets o( 
V- bu ^ s i 山 Yo 士 ok” 扣 d %idcoSdc^io/. 

width= "720" height= "480 M X/video> 


id= n normal n X/a> 
id= n we s te r n ▼▼ X / a> 
id= n noir M X/a> 
id= n scifi n X/a> 


They’ve alv-cady got a video playcv- 

… good, wcVc jomj -fco v\ttd that- 


tteve av-c all c-f-Pcd-b. 


J 


These a\rc all just HT/WL 
a^dhov-s. lA/cll sec how we 
tic ijrto these ih d Sd. 


id= n play n X/a> 

id= n pause n X/a> 

id= n loop n X/a> 

id= n mute M X/a> 


A^d the playev- ^o^tvols. 


id=’▼ video l n X/a> 
id= n video2 M X/a> 


f[Y\A *two demo videos 

-to 七 es 七 
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Inspecting the rest of the factory code 

Now let’s take a look at all the JavaScript code that shipped from the factory, 
including the code that sets up the buttons (which we just looked at in the HTML) 
and the code for each button handler (which, right now, just makes sure the right 
buttons are depressed). We’ll review it all before we start adding our own code. 



Awd wow the JavaScript. 


So let’s crack open the JavaScript (videobooth. j s). It looks like all the interface 
buttons work, they just don’t do anything interesting, yet. But it’s important that 
we understand how these are set up because the buttons are going to invoke the 
code we have to write (like, to play a video or to view a video with an effect filter). 

Below you’ll find the function that is invoked when the page is loaded. For each 
set of buttons (effects, controls, and the video selection), the code steps through 
the buttons and assigns click handlers to the anchor links. Let’s take a look: 



window.onload = function() { 

var controlLinks = document.querySelectorAll("a.control") 
for (var i = 0; i < controlLinks.length; i++) { 
controlLinks[i].onclick = handleControl; 


var effectLinks = document.querySelectorAll("a.effect") 
for (var i = 0; i < effectLinks.length; i++) { 
effectLinks[i].onclick = setEffect; 


七 he 七 ha 七 

is invoked -the is 
-fully loaded- 

Bach -Pov loops 

ovcv* of OY\C 

youp of button. 

The o^dlidk har>dlcv- -Pov 
eadh butt© 灼 flayev- 

dorrbrols is srt 七。 
KahdlcCoh*tvol Ka^dlcv. 





var videoLinks = document.querySelectorAll("a.videoSelection") 
for (var i = 0; i < videoLinks.length; i++) { 


videoLinks[i].onclick = setVideo; 


A^d -the hdhdlev* -fov 
e+to is sci h> 

A^d -Pihoilly ihc hdhdlev- 
*Po\r video sdc^tioh is set 
to setl/ideo. 


pushUnpushButtons (，▼ videol ,[]) 
pushUnpushButtons("normal",[]) 




wc vc dov)C dll the ^\rouhd wo\rk wc use B helpev 

^°/ ,Suall Y the u vidco/ w 

the hov-mal (v)o -riltcv-) but-fcoh the 


You haven’t seen document. querySelectorAll before; it’s similar to document. 
getElementsByTagName except that you’re selecting elements that match a CSS selector. 
The method returns an array of element objects that match the CSS selector argument. 

var elementArray = document.querySelectorAll( n selector"); 
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Looking at the button handlers 


OK, so far the JavaScript code takes care of setting up all the buttons so that if 
they are clicked on, the appropriate handler is called. Next, let’s take a look at the 
actual handlers, starting with the handler for the player buttons (play, pause, loop 
and mute), to see what they are doing: 



The -first thihj wc do m this handler is see 
who called us by \rc-t\ricVm9 -the id o-f the 

elemeivt -that invoked -the khdlev. 


function handleControl(e) { 

var id = e.target.getAttribute("id") 


if (id == "play") { 

pushUnpushButtons("play' 


["pause"]); 


else if (id == "pause") { 
pushUnpushButtons("pause", 

else if (id == "loop") { 

if (isButtonPushed("loop M )) 
pushUnpushButtons (，▼ '▼,[' 
} else { 

pushUnpushButtons("loop' 

} 

else if (id == "mute") { 

if (isButtonPushed( M mute M )) 
pushUnpushButtons ('▼ '▼,[' 
} else { 

pushUnpushButtons("mute' 

} /A 


'play"]) 


loop"]) 


[]) 


mute"]) 


[]) 




Ov\U wc khow the id, wc khow i-f ihe 
dcmch-t was j>lay, pause, loop ov- mu-tc. 


oy \ y/hidh burttem i 七 y/e 

altcv 七 he ih-tcv-Padc bo v-c-Plcdt 七 he 
buttern 七 hat was pushed- Fov ms-tahde i-P 
pause was pushed play shouldn't be- 

IA/cVc usir^ d hclpcv ho 

make suire ihc o^sdv-cc^ button 
states av-c iaktv\ cart of, its called 
pushIXhpushButtcms, 扣 d it takes a 

S button dlo^ y/i-th avvay 
ushed buttes aY\d updates -the 
h> vc-Plcd-t that s*ta 七 e. 


AH "this CoAt so -Pav- is dosrwctid, it jus 七 -the 

look o( "the butto 灼 s -Pvoi^ pressed vo depressed. 

Thcvc is y\o Code io do ahyth'm^ veal, like play a 
video. 丁 hat’s v/hat v/e have ho y/\ri*tc. 


Vivious but-fco^s have di-P-Pcvc^-t 
sema^iids. Fo\r ’mstahde play a^d pause 
av-c like tiruc vadio butio^s (pushing oy\C 
•m pops -the o-thev or>c out), while mute 
and loop av-c like -toggle buttons. 


Now that’s great and all, but where does our code come in? Let’s think through this: when 
a button, like play, is pushed, not only are we going to update the interface (which the 
code already does), we’re also going to add some code that actually does something, like 
make the video start playing. Let’s go ahead and look at the other two handlers (for 
setting the video effects and for setting the test video), and it should be pretty obvious (if 
it isn’t already) where our code is going to go... 
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setting up button handlers 


The sctEffcct awd setVideo handlers 

Let’s look at the other two handlers. The setEf feet handler handles your 
choice of effect, like no effect (normal), western, film noir or sci-fi. Likewise the 
setVideo handler handles your choice of test video one or two. Here they are: 



function setEffeet(e) { 

var id = e.target.getAttribute("id"); 




This wov-ks same as -the ha^dlcCo^*t\rol 
we yrd\) -the id o-f the 

dalled us (-the butto 的 that >/as ^lidked o^) a^d 

仏⑶ update the a^dov-d'mjly. 


if (id == "normal") { 

pushUnpushButtons("normal", ["western", n noir n , 

} else if (id == "western") { 

pushUnpushButtons("western", ["normal", "noir", 

} else if (id == "noir") { 

pushUnpushButtons ( n noir, ["normal" , "western", 

} else if (id == "scifi") { 

pushUnpushButtons (▼▼ seifi n , ["normal" , "western" 


A^d hevVs wheve 


ouv 


scifi 


seif i 


scifi 


'noir 



Wll be addmg CoAt io tacM cast {o hdhdle 

the app\ropv-iatc special *fil 七饮 . 



The same is iv-uc o( sci\/idco ； y/c sec y/liidh button 
v/as pressed av\d update the mtcv-Padc. 


function setVideo(e) { 

var id = e.target.getAttribute( n id"); 
if (id == "videol") { 

pushUnpushButtons ('▼ videol , [ n video2 '▼]); 

} else if (id == n video2 n ) { 

pushUnpushButtons ( ’ ▼ video2 , [ "videol"]); 



Well also be dddi^ Code heve b> inaplcmc^'t 
brtv/cc^ the -two 七 es 七 videos. 
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Awd here arc the helper fuwetiows 

And for the sake of completeness (or if you’re on a 11-hour flight to Fiji 
without Internet access and you really want to type all this in): 

pushUhpushBut-to^s takes cart o( button states. The arc the ids 

o^f a bu'ttoh "to push ih, 扣 d ov\t o\r moire butio^s -fco uhpush ih 扣 avv-ay. ^ 

function pushUnpushButtons(idToPush, idArrayToUnpush 


f[Y\d v-cmcmbcv, i-f you 
don’ 七 *to ty^>c 

i 七…， you ddn yt all 
tKc dode -fvom littp:// 
v/idkcdlysmav-tdom/ 

Ivflitml 会 . 





If u 


h ) { Fiv-st, dhc^k -to make suv-c -the id 
-the butto 灼 *to fush is y \ o {, Cmfty- 


if (idToPush ! 

var anchor = document. getElementByld (idToPush) ; ^\rdb the usmg -thol*b id- 

var theClass = anchor. getAttribute ("class") ; ^ - ... yt the dldss a*t*t\ribu*tc- 

if (!theClass.indexOf("selected") >= 0) { 

theClass = theClass + M selected" : ^ - fv-css bu*t*toh by addmj ihc 


anchor.setAttribute("class", theClass); 


w sclc^*tcd w dlass *to a^dhov-, - 


var newlmage = "url(images/" + idToPush + "pressed.png)"; 

anchor. style.backgroundlmage = newlmage; … update the ba 乙 kyouhd image of ihe 

如匕 ho\r dcrwCht so it dovevs uf that 

Ut-toh with a u but-toh p\rcsscd w image. S 。 

pause uses the U pauscp\rcsscd phg w ir^a^e. 


for (var i = 0; i < idArrayToUnpush.length; i++) 


To u^fush bu*t*to^s, wc I oof 

■through the av"\ray or ids *to 
anchor = document. getElementByld (idArrayToUnpush [i]) ; ya bbm 9 扣 dh 饮 … 

theClass = anchor.getAttribute("class"); 

~* … 你 ake suv-c 七 he bortto 灼 is v-cally pushed 
if (theClass. indexOf (-selected") >= 0) { it is, \i will have a Vle^ed^ dass).. 

theClass = theClass.replace("selected", MM ); 

anchor. setAttribute ("class" , theClass) ; v*crwovc selected -Pvorn -the ^lass... 


anchor.style.backgroundlmage = 


… 釙 d remove -the b 此 kyouhd 

so wc see the uhfushed button. 


/ - isButto 朽 pushed Simply *to see i-P a button 

is pushed- l*t *t3kcs *thc id aahov … 


function isButtonPushed(id) { 

var anchor = document.getElementByld(id) 
var theClass = anchor.getAttribute("class"); 
return (theClass.indexOf( n selected") >= 0); 


... ^irabs -the a^dhov- .. 
...yts -the dlass of 


… \rctu\rhS t\ruc i-P the a^dhov- 
has -the l sdcdtcd w dldss. 
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an early test 


That new demo machine 
smdl...test drive time! 

We haven’t done much writing code, but we are reading and 
understanding code, and that can be just as good. So load the 
videobooth. html file into your browser and check out the 
buttons. Give them a good testing. For extra credit, add some 
alerts into the handler functions. Get a good feel for how this 
is working. When you come back, we’ll start writing some 
code to make the buttons work for real. 

今 ive all those buttms a bry, hotidc some dve 

like v-adio buttes, some av-c like -toggle butt© 



i^^rpen your pencil — 

You’ll -Pmd solution jus 七 

a toiA^lc oi pays o 灼 … 


Mark the buttons below with whether they are like toggle 
buttons (independent) or like radio buttons (pushing one in 
pops the other ones out). Also annotate each button with its 
corresponding click handler. WeVe done a couple for you ： 


— " - .... - 

ri 二 ■ «rrI •♦*•■* *• « 

M M mm mm 1 舞 • •• » ■• 垂 •• • • • ■ 

_ . • - . , t ••- — •泰 •• ■»••••—•• •攀 M •• • 

^ ■— — •* - •• • 奪 _• 

f ^ trn •• •• mm •••••» «*«»• » » 令 ,__. ^ r 


___ •*—***»*^» «* , 

•- f 0 amis • 一^ ■«••»••••• »• »*• •■»•••*••* -■ 

二一 •二二二： :: ； i : 二一 
二 d 、 一二 


w*. 

• » - ...- 


• • * * ■ I » . 




2 a>« ^5" Z. a 0 MV 
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Radio buttons, play ar>d pause dav>*t Loop and Mute avc -togalc bu^tto 咚 -they 
be st\tdtd a*t *tKc sar«e 七 ’ir«e. be used ihdcpchdc^tly o( a^y othev- buttons. 


C3r\ 
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I think I missed something... 
how did you get from <div>s with 
anchor tags to having buttons in the 

interface? 


That would be the power of CSS. 

It’s a shame this book isn’t Head First HTML5 Programming with 
JavaScript & CSS, but then it would be 1,400 pages, wouldn’t it? 
Of course, we could be talked into writing an advanced CSS 
book... 

But seriously, this is the power of markup for structure and CSS 
for presentation (and if that is a new topic to you, check out Head 
First HTML with CSS & XHTML). What we’re doing isn’t that 
complex; here it is in a nutshell for the curious: 


l/Ve set the batkyou^d the Console 

<div> -fco "the booth dohsole (ho bu*tto 灼 s). 


"HlC <vidco> 
is ih a <div> y/hidli is 
positiohed \rdativc -fco the 
^Ohsolc. TliCh, the <vidco> 
clcrwCht is absolute 
positioned so i 七 si-fcs \y\ 

"UiC middle 0-(* "the dohsolc. 


I/Ve position the dashbodv*d <div> 
\rcb-tivc -to -the Console av\d -thch 
position the <div>s -fov* gv*oup o-f 
buttons \rcbtivc -to -the dashboard. 




Bsdh button yroiA^ <div> yts 

B bd 乙 dll 
the u^fushed bu*t*to^s. 


Chc^k out the CSS \ y \ detail i-f you y/a^*t : vidcoboo-th.^SS. 


tacM w WtW ， a^o^r \s _Wd 
W • 七 Wm 仏 c <aw> U -tKc ^ 
aWey^ a av^a ^{xM 

\i to^esfonds -to- 1A/Kc^ you cUV 
。“ w WtW’, 从把 c 七 U: ^cMor a 
katkyou^d o+ a ?^cd m button 

-to tovcv- up W\t uy\\>usV^cd butbw. 


you are here ► 
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exercise solution 


Sharpen your pencil 

Solution 


Mark the buttons below with whether they are like toggle 
buttons (independent) or like radio buttons (pushing one in 
pops the other ones out). Also annotate each button with its 
corresponding click handler. Here's our solution ： 







bui-fco^s use the 


c\r do^tv-ols use 


纖 ideo‘dfe 


tKc ha^dlcCoh-tvol Kawdlcv-. 




AH these avc radio buttes; 
y/t allow jus-t ohC c-P-Pcdt *to be 
applied xo video at a -time. 


Radio butt© 灼 s, play 
pause 乙扣’七 be 

selected at 七 he 
sdnrte "time- 


Loop artdi Mute 
ave "toggle buttes, 
they be used 
'mdcpchdcr>ily o( 
any o-thev- buttons. 


The video sded-fcovs av-c 

v-adio butto 灼 s -too, y/c 
be or>ly orte 

video at a time. 
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ftettmg our demo videos ready 


• tt 


Before we implement the button controls, we need video to test them with, and 
as you can see from the buttons, Starring You Video has sent us two demo 
videos. Let’s go ahead and create an object to hold the two videos and then add 
some code for our onload handler to set up the source of the video object (just 
like we did for Webville TV). 


Well dv-catc this objedt *to 
hold the two demo videos. 

WtW dome \>atk av\d 
mo\rC abou*b this sho\rtly. 


var videos = {videol : n video/demovideol n , video2 : M video/demovideo2 M }; 


window.onload = function() { 


var video = document.getElementByld("video n ); 
video.sre = videos.videol + getFormatExtension(); 
video.load(>; _ 


ttcrc, v/cVc 叫从 c video 

厂 eleme 此釙 d »*b source 

^ {jo -tKc Jf'iv-st video m i\\c av-v-ay 
y /狀 a playaWc e % 七 


Thch wc 30 ahead and load the 
video so i-p the usev didks 
its \rcady -to go. 


var controlLinks = document • querySelectorAll ( n a. control，▼); 
for (var i = 0; i < controlLinks.length; i++) { 

controlLinks[i].onclick = handleControl; 

} 

var effectLinks = document.querySelectorAll("a.effect"); 
for (var i = 0; i < effectLinks.length; i++) { 
effectLinks[i].onclick = setEffeet; 

} 

var videoLinks = document.querySelectorAll( n a.videoSelection"); 
for (var i = 0; i < videoLinks.length; i++) { 
videoLinks[i].onclick = setVideo; 


pushUnpushButtons("videol",[]); 
pushUnpushButtons("normal",[]); 


READ THIS CAREFULLY 


Now before we get sloppy, remember the getFormatExtension function is 
in Webville TV, not this code! So open up webvilletv. j s and copy and 
paste the function into your video booth code. One other small thing: in the 
video booth code we aren’t keeping a global video object, so add this line to 
the top of your getFormatExtension function to make up for that: 

Md 七 his *fco you\r 

var video = document. ge tElementByld ("video") ; at *fcop 


you are here ► 
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supporting the custom video controls 


ImplemeHtiHg the video controls 

Alright, time to get to those buttons! Now, it’s important to point out that for 
this project, we’re going to implement our own video controls. That is, rather 
than use the built-in video controls, we’re going to control the experience 
ourselves — so when the user needs to play, pause or mute the video, or even 
to loop the playback, they’re going to use our custom buttons, not the built-in 
controls. It also means we’re going to do all this programmatically through the 



Nov/ y/c VC joihj io 

all these buttons. 


API. Now, we’re not going to go all the way, which would mean implementing 


our own video scrubber, or perhaps next and previous buttons, because those 


don’t make sense in this application, but we could if we needed to. You’ll find that 
just by implementing our small control panel you’ll get the idea and be in 


perfect shape to take it further if you want to. 


So, let’s get started. How about if we start with the play button and then move 
to the right (to pause and then to loop and then to mute) from there? So find 
the handleControl handler and add this code: 


function handleControl(e) { 

var id = e.target.getAttribute( n id"); p , , 

var video = document.getElementByld("video"); 丨 ^ 

video object* 


if 


} 

} 


} 


(id == "play") { 
pushUnpushButtons( n play n , 
if (video.ended) { 
video.load(); 

} 

video.play(); 
else if (id == "pause") { 
pushUnpushButtons("pause" 


["pause"]); 




This should be simple- l-P 

七 he usev- has pvessed play, 七 hen 
匕 all the play method or\ -the 
video object 


'play"]); 


Bui well you, 七 hevVs o^c 

edge dasc heve about -to bi-tc 


else if (id == "loop") { 

if (isButtonPushed("loop n )) { 

pushUnpushButtons (，"▼,[，▼ loop"]); 
} else { 

pushUnpushButtons("loop",[]); 

} 

else if (id == "mute") { 


us, so lets jo ahead Bv\d -take 
dav-c o( i-t ： l-P v/c^vc flayed a 
video, ar\d lei that video play 
-thv-oujh -to ertdl ； -fco 
s-tav-t i*t playmj >/e have 
■fco load ii -Piv-st Wc thedk 
•to r»»akc suv-c 七 he Video 心 


if (isButtonPushed( M mute n )) { 

pushUnpushButtons("", ["mute"]); 

} else { 

pushUnpushButtons("mute",[]); 


-thv-oujh "to CY\d (Bv\d 
jus-t paused), because v/e o^ly 
v/a^-t "fco load m 七 ha 七 dase- 
l-P it’s paused, v/c taY\ jus-t play 
without loddm^. 
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ImplemeHtmg the rest of the video controls 

Let’s knock out the rest of the controls — they’re so straightforward they’re 
almost going to write themselves: 


function handleControl(e) { 

var id = e.target.getAttribute("id"); 

var video = document.getElementByld("video"); 


if (id == "play") { 

pushUnpushButtons( n play n , 
video.load(); 
video.play(); 

} else if (id == "pause") { 
pushUnpushButtons("pause" 
video.pause(); 


["pause"]); 



l-P usev- pauses -the video, 
use video objedts 
pause method. 


else if (id == "loop") { 

if (isButtonPushed("loop n )) { 

pushUnpushButtons ('▼，▼, ["loop"]); 

} else { 

pushUnpushButtons("loop", 


else if (id == "mute") { 

if (isButtonPushed("mute n )) { 

pushUnpushButtons (，"▼,[ "mute "]); 
} else { 

pushUnpushButtons("mute",[]); 

} 

video.muted = !video.muted; 



video.loop = !video.loop; 



Fov loofm^ jo*t 3 
booled^ property earned loop 
m video objedt Wt just 
sti it af\>v-ofv-ia*tcly... 


•a^d -fco do 七 ha 七 well keep 
you or\ youv- -toes by usmg -the 

boolea 的 (r\oi) opcv~a*fcov-, 

>nW\CM just -flips -the boolean 
value -roir us. 


W'u-tc y/orks -tKc sa^c >way* 
y/c just -flip value 

o-f i\\c 州 uie poperb/ 

pv-csscd. 


Another test drive! 

Make sure you’ve got all the code changes typed in. Load 
videobooth. html into your browser and give your control buttons 
a test. You should see video start playing, be able to pause it, mute it, 
or even put it in a loop. Of course, you can’t select the other demo 
video yet or add an effect, but we’re getting there! 



you are here ► 
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dealing with video ended event 


Taking care of a loose end... 


There’s a little loose end we need to take care of to really make these buttons 
work like they should. Here’s the use case: let’s say you’re playing a video 
and you don’t have loop selected, and the video plays to completion and 
stops. As we have things implemented now, the play button will remain in 
the pressed position. Wouldn’t it be better if it popped back up, ready to be 
pressed again? 


Using events we can easily do this. Let’s start by adding a listener for the 
ended event. Add this code to the bottom of your onload handler: 



0 Ou\r play button isr / 七 

100 % yet- 


Srt a har\dlcv- -Pov- -the 
w c^dcd w y/hidh is 

ddlled 七 he video 
playback c^ds (bu-t NOT 
when you pauscO- 


function endedHandler() { 

pushUnpushButtons ('▼",[ "play"]); 


All wc r\tcd b> do 
is w uhpush’’ 七 he play 
button. That’s i*t. 


video.addEventListener("ended ", endedHandler, false); 

Now let’s write the handler, which will be called any time the video 
playback stops by coming to the end of the video: 


And another." 

Okay, make the changes, save the code and reload. Now start a video and let it play to its conclusion without 
the loop button pressed, and at the end you should see the play button pop back out on its own. 




气一 ,1^1 Ii .—• F 



\n 


The play button should pop \rijh-t bddk 
ou 七 a-rtev 七 he video -f inishes playm} 
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Switching test videos 


We already added an object to hold our two test videos, and we’ve even 
got two buttons for selecting between them. Each button is assigned the 
setVideo handler. Let’s work through writing that now so we can switch 
between our videos: 

ttere’s ouv objcdt with two videos, v/cVc shov/mj this 
as a v-cm'mdcv-, so you see hov/ wcVc jo'm^ *to use it". 


DGMi WBm()#2 



MO V1DK0 #1 


var videos = {videol : "video/demovideol", video2 : n video/demovideo2 M }; 

( ■ ^{y\A the ha^dlcv aja'm- 


function setVideo(e) { 

var id = e.target.getAttribute("id"); 

var video = document.getElementByld("video"); 


kr 


the video objedt 


if (id == "videol") { 

pushUnpushButtons("videol", ["video2 M ]) 

} else if (id == "video2 n ) { 



pushUnpushButtons (▼▼ video2，▼, [ "videol，▼]); 

} 

video.sre = videos[id] + getFormatExtension(); 
video.load(); 
video.play(); 



pushUnpushButtons("play", ["pause"]); 


make suv-c play button is pushed *m 
bedduse y/e s*tav 七 video playm^ 

usev- dlidks or\ B mevj video sclcdtio 灼 . 


T 


Thch wc still update the 
but-fcohs ih the way we 

Tkh wc use the souv-dc id the 
bu*t*toh f-thc id attv-ibutc - the 
^ah^ho\r) -to yra\) -the toYYtti video 

七 3 hd sdd Oh ou\r b\rov/scv*—dv/dV'C 

cx-tchsioh. No-tidc wcVc usihg the C J 
hotatioh with ou\r videos ob\c^ usmg 
the id st\rmg as the p\ropc\rty har^e. 

we have -the toY^rtti video path oihd 
4-ilchamc, wc load oihd play the video. 


Switch drivers and test drive ! 琢 

Make these changes to your setVideo function 
and then load your page again. You should now 
be able to easily switch between video sources. 



you are here ► 
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video element interview 



This week’s interview: 

Confessions of the Video Element 


Head First： Welcome, Video. I’m going to 
jump right to the topic on everyone’s minds, 
and that would be YOU and the Canvas 
element. 

Video： Meaning? 

Head First： Allegedly nights out on the 
town, early morning breakfasts together. 
Need I say more? 

Video： What is there to say, Canvas and I 
have a great relationship. She displays her 
content in a very, let’s say, visually appealing 
manner, and I’m a video workhorse. I 
crunch through codecs and get that video 
content to the browser. 

Head First： Well, that’s not what I 
was getting at, but I’ll go with it. Okay, 
she’s great at 2D display, you’re great at 
video display. So what? What’s the real 
connection? 

Video： Like any relationship, when you put 
two things together and get out more than 
the sum of the parts, that’s when you have 
something special. 

Head First： Okay, well, can you put that 
in more concrete terms? 

Video: It s a simple concept. If you 
want to do anything other than just basic 
video playback — that is, if you want to do 
any processing on your video, or custom 
overlays or display mulitple videos at once — 
then you want to use Canvas. 


Head First： That all sounds great, but 
video requires heavy-duty processing, I 
mean that’s a lot of data coming through. 
How is JavaScript, a scripting language, 
going to do anything real? Writing 
JavaScript code isn’t like writing in a native 
language. 

Video： Oh you^ be surprised... have 
you looked at the latest benchmarks on 
JavaScript? It’s already fast, and getting 
faster every day. The industry’s brightest 
virtual machine jockeys are working the 
problem and kicking butt. 

Head First： Yeah, but video? Really? 

Video： Really. 

Head First： Gan you give us some 
examples of things you can do with 
JavaScript, canvas and video? 

Video： Sure, you can process video in real 
time, inspect the video’s characteristics, grab 
data from video frames, and alter the video 
data by, say... rotating it, scaling it or even 
changing the pixels. 

Head First： Gan you walk us through how 
you might do that in code? 

Video： Uh, I’ll have to get back to you on 
that, just got a call from Canvas... gotta 
run... 
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Ifs time for special effects 

Isn’t it about time we add those movie effects? What we want to do 
is take our original video and be able to apply effects, like film noir, 
western, and even an otherworldly sci-fi effect. But if you look at the 
video API, you won’t find any effects methods there, or any way to 
add them directly. So how are we going to add those effects? 

Take a little time to think through how we might add effects to our 
video. Don’t worry that you don’t know how to process video yet, 
just think through the high level design. 




Wlc *to -take ouv 


ovig’mal video ar>d be 

able bo apply ViU y\oW, 

v/cs*tcv*r>, dir>d sdl—f l 



Staffitlfl Uou Video Use -tKis ⑶ -to a label \i, ov 

Engineering Notes... ou*t pseudo—6odc -fov toAt -Pov youv video TiVmk 

七 his as a v/avm up, jusi -to JC-t youv bva'm jo'mj... 


Ho>n >w'ill y ou 7 ouv " ^ avv< ^ s 
七 he ^'»%cls make 叶 tat\\ 

-fv-amc o( video? 


0rxU you've 3 ot iKc pixels, Kow do you 
piro 夂 ss tKcw» -to apply tKc ' 


Say y ou w 供 ^ 0 >NV-«*bc a 

y/ould i"t look like? 


Wow you display iKc video 
you've pirodcsscd all i-ts 
pixels "to apply -tKc 



Youv- ideas V^cv-c. 
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plan for implementing video effects 


The FX plan 

We don’t know exactly how to implement the effects yet, 
but here’s a high level plan of attack: 



We know we’ve still got to hook up those 
buttons that control the effects. So we're 
going to do that first. 



We’re going to learn a little about video 
processing and checkout the "scratch 
buffer" technique for adding our effects. 



We're going to implement the scratch 
buffer, which is going to give us 
a chance to see video and canvas 
together in action. 



We’re going to implement one 
function for each effect: western, film 
noir, and sci-fi. 



Finally, we're going to put it all together 
and test! 




The buttons 

still y\tcd {o 
be wived up. 





The sdmaidh 

bu-f-Pc\r, -tha-t 


looks m-tev-cstmj... 


Irwplerwerrt 七 he 

bu-P-Pcv-, 


usrng dar>vas 
(believe i"t oy mo^l 


function noir(pos, r, g, b, data) { 


l/Ve’ll display the 
oiltev-cd pixels ih a, 
you guessed it, 






Now you know we’re going to implement a function that will handle each effect. Let’s 
take film noir, for example. How are you going to take a color pixel from the video and 
make it black and white? Hint: every pixel has three components: red, green, and 
blue. If we could get our hands on those pieces, what could we do? 
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Time to get those effects buttons working 

Alright, the easy part first: we’re going to get those effects buttons 
wired up and working. We’ll start by creating a global variable named 
effect Function. This variable is going to hold a function that can take 
data from the video, and apply a filter to it. That is, depending on which 
effect we want, the effect Function variable will hold a function that 
knows how to process the video data and make it black and white, or sepia, 
or inverted for sci-fi. So add this global variable to the top of your file: 



var effectFunction = null; 


Now we’re going to set this variable anytime an effects button is clicked on. For 
now, we’ll use function names like western, noir and scifi, and we’ll write 
these functions in just a bit. 


ouv* sctE-P-Pcdt Rcmcmbcv* "this is dallcd 

the usev t\\cVs oy\ B c-r-rcdt bu*t*to 灼. 


function setEffect(e) { 

var id = e.target.getAttribute( n id") 



Fov button 
f\rcss y/C set the 

variable 

•to the a\>fv-ofv-ia*tc 
(all o( 

WC still *to w\ri*tc). 


'western' 


'normal' 


if (id == "normal") { 

pushUnpushButtons("normal" 
effectFunction = null; 

} else if (id == "western") { 

pushUnpushButtons("western 1 
effectFunction = western; 

} else if (id == "noir") { 

pushUnpushButtons("noir", 
effectFunction = noir; 

} else if (id == "scifi") { 

pushUnpushButtons( n scifi n , ["normal 1 

effectFunction = scifi; 


noir' 


scifi"]) 


l-f the c-f-fcdt is 灼 o 

c-P-Pcdt, ov 

’ wc just use ywa\\ ds 


use 

the value- 


noir' 


scifi"]) 


["normal 


'western' 


scifi"]) 


Othcirwisc wc set 

Uh^-fcioh "to 
釙 appvopHa-tdy 

^ -Puh^tioh 

/ will do the 

d ' 


f k 荏 apply— 


'western' 


noir"]) 


Wc still y\ttA *to y/v-i*tc these c-f-fcdts 
-Pu^dtio^s. So, let’s see hov/ v/c f\rodcss 
video so v/e tav\ apply c-P-Pcdts -to \i! 



Okay, with that out of the way, we’re going to learn about that “scratch buffer’’ and 
then come back and see how these functions fit in, as well as how to write them! 
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overview of video processing 


How video processing works 


What we’ve done so far is given ourselves a way to assign a function to the ef f ectsFunction 
global variable as a result of clicking on the effects buttons in the interface. For now，just take 
that knowledge and tuck it in the back of your brain for a little while, because we’ve got to work 
through how we’re actually going to take video and process it in real time to add an effect. To 
do that we need to get our hands on the video’s pixels, alter those pixels to achieve our desired 
effect, and then somehow get them back on the screen. 


Now, does the video API offer some special way to process video before it is displayed? Nope. 

But it does give us a way to get the pixels, so we just need a way to process and display them. 

Wait, pixels? Display? Remember Chapter 7? The canvas! Ah, that’s right, we did mention < — devils 
something about the “special relationship” that the video element and canvas have. So, let’s 七 ^ stoop, -f'mSllY 

walk through one of the ways the video and canvas elements can work together: v*evedled^ 


① 







- 


⑤ 


② Video is copied frame 
by frame into a 
(hidden) buffer canvas 
and processed. 

Colo\r m the ori^mal video. 

^ Pv-odcssmg to\or bo, say, 

/ \ y \ a bu-P+cv da^vas. 

v/c dopy the 

/ pv-odcsscd -fv-amc -from 
the buffer *to 
display da^vas. 

a nutshell, v/cVc 
-taking eddh -fvamc 
o-f video 

i*t -fv-om 

£.olo\r *to BfW a 灼 d 

⑶ display'mj it 


After a frame is 
processed, it is copied 
to another display 
canvas to be viewed. 


The video player 
decodes and plays 
the video behind 
the scenes. 
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How to process video using a scratch buffer 

Now, you might ask why we’re using two canvases to process and display the 
video. Why not just find a way to process the video as it is decoded? 



The method we’re using here is a proven technique for minimizing visual glitches 
during intensive video and image processing: it’s known as using a “scratch 
buffer.” By processing a frame of video in a buffer and then copying it all in one 
fell swoop to the display canvas, we minimize visual issues. 


Let’s step through how our scratch buffer implementation is going to work. 


① 


The browser decodes the video into a series of 
frames. Each frame is a rectangle of pixels with 
a snapshot of the video at a given point in time. 



Oy\C video. 


② As each frame is decoded we copy it into the 
canvas that is acting as a scratch buffer. 



Wc £.opy whole m*to the da^vas. 


T 


^ This is -the 

sdvatdh bu-P-Pcv-. 


you are here ► 


393 




using a scratch buffer 


③ 


We iterate over scratch buffer, 
pixel by pixel, passing each pixel to 
our effects function for processing. 



如？••对 1 dab W 

七 he tarwas, we attcss »*t ov\t at 
a dhd yrottss \i by mampulatm^ 
七 values m catK 卜 el. 



ef f ectFunction( | ) 

^ I pixel 


④ 


After all the pixels in the scratch buffer are 
processed, we copy them from the scratch 
buffer canvas to the display canvas. 



Ov\tt the data m the sdv-a-tdh 
bu-P-Pcv is processed... 



… we yrd\) the ima^e -fv-om *thc 

sdv-a*t^h bu-P-Pcv- da^vas a^d dofy the 

v/hole *to *thc display da^vas. 



And c^p douvsc, -this 
is "the 匕 dhVds you 

actually see/ 


⑤ 


And then we repeat the process on every 
frame as it is decoded by the video object. 
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Impkmewtiwg a scratch buffer with Canvas 

As you already know，to implement a scratch buffer in canvas we need two 
canvases: one to do our computation in, and one to display our results. To 
create those canvases, we’ll start back in our HTML file videobooth. html. 
Open this file and find the <div> with the id ''videoDiv” and add two canvas 
elements below the <video>: 

<div id= n videoDiv n > 

<video id= n video" width= M 720 M height= n 480 n X/video> 
<canvas id= n buffer" width="720 M height= n 480 n X/canvas> 
<canvas id=”display n width= M 720 M height= n 480"X/canvas> 
</div> 



How to position the video and canvases 

Now you might be wondering about positioning these elements; we’re going to position them 
right on top of each other. So at the bottom will be the video element, on top of that is the 
buffer, and on top of that, the display canvas element. We’re using CSS to do it, and although 
we don’t talk much about CSS in this book, if you open videobooth. css you’ll see the 
positioning for the three elements: 


div#videoDiv { 

position : relative; 
width : 7 2 Opx; 
height : 48Opx; 
top : 18Opx; 


_. TKc vidcoPw <dw> is positioned \rclativc b> 士州⑶七 ’i 仏 

•m ( 七 he dov>sole <dw>), a*t -fvom i\\c *tof 

-pv-om 七 , flades "rt o( doy>solc. 

- - - Wc sc*t -the c«\ual *to i\\t v/*id*th ar>d Ki^vt 

o*P *thc <v*idco> air>d 七 he 七 v/o <dair>vas> elements. 


left : 190px; 


video { 

background-color : black 


The <v*idco> is 七 vidcoPiv <d*iv> so 

•its auWatidally positioned ai -top \t(i <dw>. 
We sti -the badk^v-ou^d io bladk so 七 ha 七 4 have 

bo%m^ ov fillav - —spate is bla 乙 k. 


div#videoDiv canvas { 
position : absolute; 
top : Opx; 
left: Opx; 


^ - * The *t>/o <^a^vas> elemeirrb m -the vidcoDiv <div> av-c 

positioned absolutely v/i*th vcspc^*t *bo vidcoDiv 

so by clcrwc^*ts a*t Opx. -f\rom 

ihc *top, Opx. -fv-om Ic-ft *t^cy av-c'm 
same position as -the < vidco> vidcoDiv. 
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Writing the code to process the video 

We’ve got a video element, a buffer that’s a canvas, and a canvas that is going to display the 
final video frames. And we’ve also got them stacked on one another so we see only the top 
display canvas, which will contain the video with the effect applied. To process the video 
we’re going to use the video element’s play event, which is called as soon as a video begins 
ing. Add this to the end of the onload handler: 

video.addEventListener("play", processFrame, false); 

The process Frame function is where we’ll process the video pixels and get them into the 
canvas for display. We’ll start by making sure we have access to all our DOM objects: 


*tKc v'»dco 

playi% »七 Will tall he 

po 以 ssfVa 州 e. 



function processFrame() { 


Fivs-t jv-ab 七 he video object". 


var video = document.getElementByld("video"); 
if (video.paused || video.ended) { 
return; 


… cMttk {jo sec i-f video is 

still playihj. I-P i*t isy /七 we’ve 

Jot r\o v/ovk -fco do, just v-ctu\rr>. 


var bufferCanvas = document.getElementByld("buffer"); 
var displayCanvas = document.getElementByld("display"); 
var buffer = bufferCanvas . getContext ( n 2d M ) ; 
var display = displayCanvas.getContext( n 2d M ); 


jvab a vc-Pcv-chdc h> 

both da^vas d^d 

also -to -theiv 

wc ire jo'mj -to Y\ctd those- 


How to create the buffer 


To create the buffer, we need to take the current video frame, and copy it to the buffer canvas. 
Once we have it on the canvas, we can process the data in the frame. So, to create that buffer 
we do this (add this to the bottom of processFrame): 

H takes by\ Br\d dv-av/s o^*to *thc 

tBvw/Bs, d*t By\ 乂 , y position -fo\r d ^tY\ height 



Rcmcrwbcv- do^*tcx>*t 

(J\rdV/|md^C method *f\rom 

Chapicv- 7? 飞 

V 



This -time, v/cVc a 内 -fvom video 

s^cdi-(*Ynr>^ video 3s souv^dC) dvawlrway 
o( Video 3s 



buffer.drawlmage(video, 0, 0, bufferCanvas.width , bufferCanvas.height); 

var frame = buffer.getlmageData(0, 0, bufferCanvas.width r bufferCanvas.height) 



v/c jvab da*ta -fvom 

CSyw/Bs 匕 o 灼 *tc 乂 *t 3 灼 d s*bo\rc i*t m d 

variable ； -fv-arwc, so y/c pv-odcss i*t. 


tteve, jus 七 saym^ >wc 

daia m *tKc day>vas. 


必七 all 七 he 
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How to process the buffer 

We’ve got our hands on a frame of video data, so let’s do some processing on it! To process 
the frame, we’re going to loop over every single pixel in the frame data and pull out the RGB 
color values that are stored in each pixel. Actually, each pixel has 4 values, RGB and Alpha 
(the opacity), but we’re not going to use the Alpha. Once we’ve got the RGB values, we’ll call 
the ef fectFunction (remember, that’s the function we set back on page 392 and asked you 
to tuck in the back of your brain!) with the RGB information and the frame. 

Add this code to the bottom of your pro cess Frame function: 


buffer.drawlmage(video, 0, 0, bufferCanvas.width , displayCanvas.height); 

var frame = buffer.getlmageData(0, 0, bufferCanvas.width r displayCanvas.height); 

pivs*t, -f md ou*t o( Notice 

var length = frame . data. length / 4 ; -that is m a pv-opcv*ty o( 

is a fvofcvty o+ -fva^c dia'b^- Ti^c length is ad*tually 

-fouv times lo^^ev- 七 he sizjc 七 he tay>vas bedause cath 

has -fouv- values ： R^BA- 


for (var i = 0; i < length; i++) { 

var r = frame.data[i * 4 + 0]; 

var g = frame.data[i * 4 + 1]; 

var b = frame.data[i * 4 + 2]; 

if (effectFunction) { 

effectFunction(i, r, g, b, frame.data); 


values 
m 'the 


Nov/ y/c loop ovcv- data gc*t R 今 B w 

-fov tBt\\ pixel- ^BCM Pi>cd "takes up -four i 

av-vay, so wc jv-ab v -fv-om posi*ticm, g -fvom 

sctoy\d, b 


display.putImageData(frame, 0, 0); 


T)) w $ da " 七 *^ c^tciP\AUhov\ (i-f ii's hot hull, wh'Uih it 
will be 4 卜 Wo\rmal w but-toh is pressed), passmg m the 
position of the pixel, -the values, a^d the 
a^ay. The t\\td Wuhov\ will upda-tc -the -Pv-a^c da-ta 
av-v-ay with pixel values, passed auordM b> the 
士 || 七饮 士 uhd：ioh assigned -to c^cdFuh^-tioh. 


this po'm*t -the -Pv-amc daia has bcc^ processed, so v/c use 
■the do^*tc>c*b pu-tlmajcPata method -to fu*t the data m*to 
the display da^vas. This mc*thod takes the data m fvamc 
BY\d wv-i*tcs i*t m*to i\\t CBywiBs ai 仏 C sfcdi-Picd y position. 

We've processed one frame, what next? 

Yes, that’s one single frame we just processed, and we want to keep processing them all as the 
video continues to play. We can use setTimeout and pass it a value of zero milliseconds 
to ask JavaScript to run process Frame again as soon as it possibly can. JavaScript won’t 
actually run the function in zero milliseconds, but it will give us the next soonest time slot we 
can get. To do that, just add this to the bottom of your process Frame function: 


setTimeout is jus*t like 

sc*t|^*tc\rval, 

that it v-u^s o^ly oy\Cc 

a-P*tcv- a sfe^i+ied time 

•m mi||iscdoir\ds. 


setTimeout(processFrame, 0) 


Tells JavaSdv-ip*t *to \rui^ P\ro£.cssFv-amC 
as soon as possible ： 


as possibl 
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frame rates and timers 


IVs interesting you are using 
set Timeout with a time of zero. 
Whafs going on there? Shouldn’t we 
be doing something thafs tied to a 
video's frame rate or something? 



We wish we could. 

You’re absolutely right: what we’d love to do is have our 
handler called once for every frame, but the video API 
doesn’t give us a way to do that. It does give us an event 
named timeupdate that can be used to update a running 
time display of your video, but it doesn’t tend to update at a 
granularity that you can use for processing frames (in other 
words, it runs at a slower rate than the video). 

So instead we use setTimeout. When you pass zero to 
setTimeout, you’re asking JavaScript to run your timeout 
handler as soon as it possibly can — and this leads to your 
handler running as frequently as it possibly can. 

But might that be faster than the frame rate? Wouldn’t it 
be better to calculate a timeout close to what is needed for 
the frame rate? Well, you could, but it’s unlikely that the 
handler is going to actually get to run in lockstep with the 
frames of your video, so zero is a good approximation. Of 
course, if you are looking to enhance the performance 
characteristics of your app, you can always do some 
profiling and figure out what the optimal values are. But 
until we have a more specific API, that’s our story. 
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Now we need to write some effects 

Finally, we’ve got everything we need to write the video effects: we’re grabbing 
each frame as it comes in, accessing the frame data pixel by pixel and sending 
the pixels to our effect filter function. Let’s look at the Film JVoir filter (which, in 
our version, is just a fancy name for black and white): 


The -Piltcv is passed 

•the position <^f the fixel … 


»> is d bi*tv/'isc 
opcva*tov- 七 ha 七 
sKi-fts bits m 
■tiic ruAmbcv value 
ovcv •to modi-fy 
■tiic 灼 umbev. 

t'X.flovc -furtiicv- 
•m a JavaSd\rip*t 
\rc-fcV"Cr\£.C book. 


- the Yt&i artd 

blue pi^ccl values ... 

m 


… d 灼 d d \rc-Pc\rc^dC "to 

*thc -Pvarwc daia a\rray 
•m -the ddrtvas. 


function noir(pos , r, g, b, data) { 

var brightness = (3*r + 4*g + b) »> 3; 
if (brightness < 0) brightness = 0; 
data[pos * 4 + 0] = brightness; 
data[pos * 4 + 1] = brightness; 
data[pos *4+2] = brightness; 



So 七 he -fivs-t -thihj y/c do is 

r pute a bv-ijh-t^css value 
this pixel based oy \ all i-b 
(\r, b g). 


thch v/c assi^ eadh 

乙 oir^po 灼 C)rrt m *thc ddirtvas 

in^ajc bo 七 ha 七 bvigh-t^css. 


Rcrwcrwbcv "this 
fuir^ticm is called 
or\Ct pev- pi 乂 el m -the 
video -rvarwc^ 


This has -the a-P-Pcdi o( srttmg 
七 he pixel "to a jv-cy sdale value 

"that dov-\rcspo^ds -fco the pi 乂 el’s 
overall bv-ijlvt^css. 


A film woir test drive 


Add this function to videobooth. j s and then reload 
your page. As soon as the video starts rolling press the 
Film Noir button and you’ll see a brooding black & white 
film look. Now choose Normal again. Not bad, eh? And 
all in JavaScript, in real time! 


o-p y/liCh 

you thihk about it. 
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exercise in implementing video effects 


i^arpen your pencil 


This book isnt really about video processing and effects, but 
it sure is fun. Below weve got the western and sci-fi effects. 
Look through the code and make notes on the right as to how 
each works. Oh, and we added an extra one—what does it do? 


function western(pos, r, g, b, data) { 

var brightness = (3*r + 4*g + b) »> 3; 
data[pos * 4 + 0] = brightness+40; 
data[pos * 4 + 1] = brightness+20; 
data[pos *4+2] = brightness-20; 


function scifi (pos, r, g, b, data) { 
var offset = pos * 4; 
data[offset] = Math.round(255 - r); 
data[offset+1] = Math.round(255 - g); 
data[offset+2] = Math.round(255 - b); 


function bwcartoon(pos, r, g, b, outputData) { 
var offset = pos * 4; 
if( outputData[offset] < 120 ) { 
outputData[offset] = 80; 
outputData[++offset] = 80; 
outputData[++offset] = 80; 

} else { 

outputData[offset] = 255; 
outputData[++offset] = 255; 
outputData[++offset] = 255; 

} 

outputData[++offset] = 255; 

++offset; 
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The Pig Test Prive 

This is it! We have this code wrapped up and ready to ship off to 
||0U VfdGO. Go ahead and double check that you’ve 
got all the code typed in, save, and load videobooth. html. 
Then have fun playing around with your new app! 



fi f ' I 










Sdi—fi mode 


\、 t ⑽邮 

Wics*tcvr\ mode 




Pilm Noiv mode 


Ko\rmal mode 
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IN THE LABORATORY 


Obviously we’ve only scratched the surface in 
terms of video processing, and we’re sure you 
can think of more creative effects than those 
we came up with. Go ahead and think up a few, 
implement them, and document them here. 


Have you invented something really cool 
and implemented it? Tell us about it at 
wickedlysmart.com and we’ll feature it for 
other readers! 



rouv- 


ideas iicvc! 



BflV Cartoon is jus 七 

or\C o^c 你為叫 o*t^cv" 
-fur> you do 

y/i 七 
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O 



Hey I know its almost the end 
of the chapter, but I keep meaning 
to ask this ： weve been loading video from 
a local file, what changes if my video is 
hosted on the Web? 


Sure，just use a web URL. 

You can substitute a web URL for any of the sources we been 
defining locally. For instance: 

〈video src="http : //wickedlysmart.com/myvideo.mp4"> 

Keep in mind there is more room for bad things to happen when 
you are delivering on the Web (and we’ll talk about how to handle 
those things in a moment). Also, the bitrate of your videos starts to 
matter a lot more when delivering to a browser or a mobile device 
over the network. Like with video formats, if you’re going down 
this road, seek out experts and educate yourself. 


Great, and one 
more question, is there a 
difference between what were 
doing and streaming video? 


Yes, a big difference. 


The term streaming often gets used like the term xerox or 
kleenex — as a generic term for getting video from the Web to 
your browser. But “progressive video” and “streaming video” are 
actually technical terms. In this book we’ve been using progressive 
video, which means when we retrieve the video (either locally or 
over the network) we’re retrieving a file using HTTP, just like an 
HTML file or an image, and we try to decode and play it back as 
we retrieve it. Streaming video is delivered using a protocol that is 
highly tuned to delivering video in an optimal way (perhaps even 
altering the bitrate of the video over time as bandwidth becomes 
more or less available). 


Streaming video probably sounds like it would provide your user 
with a better experience (it does), and is perhaps more efficient in 
terms of your user’s connection and your bandwidth charges (it is). 
On top of all that, streaming video makes it easier to do things like 
protect the content of your video if you need that kind of security. 
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video streaming 




售 


So, is there a standard 
for HTML5 streaming? 


There is no standard for streaming video 
with HTML5. As a matter of fact the 
problem isn’t HTML5, there isn’t really 
a supported standard for streaming 
video anywhere — but there are plenty of 
proprietary ones. Why? There are a number 
of reasons ranging from the money to be 
made with streaming video to the fact that 
many people in open source don’t want to 
work on a protocol that could be used for 
DRM or other protection technologies. Like 
the situation with video formats, we’re in a 
complex world with streaming video. 


There are solutions out there. 


There are lots of legitimate uses for streaming 
video technologies, and if you have a large 
audience, or you have content you think needs 
to be protected, you should check them out: 
Apple’s HTTP Live Streaming, Microsoft’s 
Smooth Streaming and Adobe’s HTTP 
Dynamic Streaming are good places to start. 

There’s good news on the horizon too: the 
standards bodies are starting to look closely at 
HTTP-based video streaming, so keep an eye 
out for developments in this area. 





_ 
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If owly it were a perfect world.. 

But it’s not: we have all those nasty network issues, 
incompatible devices and operating systems, and an 
increasing chance of asteroids hitting the earth. That 
last one we can’t help with, but for the first two actually 
knowing you have an error is half the battle, then you 
can at least do something about it. 

The video object has an error event, which can be 
thrown for a number of reasons that can be found in 
the video. error property, or more specifically in the 
video. error. code property. Let’s take a look at what 
kinds of errors we can detect: 




mm 


We are experiencing technical difficulties 


Errors 

Used any time the process of 
getting the video over the network 
is aborted by the browser 
(possibly at a user’s request). 


Used whenever a network 
retrieval of the video is 
interrupted by a network error. 


mmjvjujmn-s 

Used whenever the decoding of 
a video fails. This could happen 
because the encoding uses 
features the browser can’t support 
or because the file is corrupt. 


Used when the specified video source 
cannot be supported because of a 
bad URL or because the source type 
isn’t decodable by the browser. 


ta 乩 cvvov- type also has a” 
asso^id^tcdi itua 你 bev 七 lie 

cvvov to&t p\rodudcd 
e 心七 , y/cll see 


is 

d by 

•m jus 七 3 


cvvov 
3 
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handling video errors 


How to use error evewts 

Dealing with errors is complex business and how you deal with errors depends a lot on your 
application, and what would be appropriate for the app and your users. That said, we can at 
least get you started and point you in the right direction. Let’s take Webville TV and give it the 
ability to know it has encountered an error — and if it does encounter one, give the audience a 
PLEASE STAND BY message. 


We want to be notified when there’s an error message, so we need to add a listener for the error 
event. Here’s how we do that (add this to the onload handler in webville . j s): 


video.addEventListener("error ", errorHandler, false); 

Now we need to write the function errorHandler, which 
will check if there is an error, and if so, place our “please 
stand by” image on the video display by making it the 
poster image: 

— ， 

var video = document.getElementByld("video"); 
if (video.error) { 

video.poster = "images/technicaldifficulties . jpg"; 

Optionally add *tlVis bo be able h> sec -the cv-v-ov- 
Code (sec ihc previous -fov -the s*tovcd 

\y\ todc p\ropc\rty). 


alert(video.error.code) 



_ W\)CY\ 3^ cv-\ro\r odduv-s, -the 
cv-vovH'ahdlcv- is called- 

- l-f -the ha^dlcv- is 匕 ailed, v/e make suv-c *thc\rc is 
cv-vov- by video.cvvov wc 

pla 以 a pos-tev- up 01 ^ video display. 


Test Crash ! 令 

There are many ways for the playback of the video to fail, and to test this 
code you’re going to make it fail. Here are a few suggestions: 

■ Disconnect your network at different points in playback. 

■ Give the player a bad URL. 

■ Give the player a video you know it can’t decode. 

■ Give the player a URL that isn’t even a video. 

■ Use software to reduce your bandwidth (it’s out there, just look for it). 

So get this code typed in and get testing. Remember you can map the integer in 
the alert dialog back to a real code by looking at the codes on page 407. 
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Where can you go from here? 

This is where it gets exciting, because think of all you know how 
to do with HTML markup, with the video element and, of course, 
the canvas...not to mention web services, geolocation... wow. Sure, 
we did some cool video processing with canvas, but you can apply 
everything you know how to do with canvas to video. Here are 
just a few ideas we had, please add your own. And give yourself a 
pat on the back from us, you’ve earned it! 


Use web-services to 





Create your own 
on-screen controls or 
programming guide. 


Create time-based 
content that 
displays only during 
specific time ranges 
of playback. 


UseJSONP 
and make it 
interactive! 


Create picture 
within-picture 
viewing. 


provide context-relevent 
information to your video. 


Are you pc^ular? 


Use your 
location to 
deliver relevant 
advertising. 


......... 


Use all those 
graphics and text 
APIs you know 
how to use from 
canvas, right on 
top of the video. 
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review of the video api 


BULLET POINTS - 

■ You can play video by using the <video> element 
with a few simple attributes. 

■ The autoplay attribute starts playback on page load, 
but use only when appropriate. 

■ The controls attribute causes the browser to expose 
a set of playback controls. 

■ The look and feel of controls differs among browsers. 

■ You can supply your own poster image with the 
poster attribute. 

■ The src attribute holds a URL to the video to be 
played. 

■ There are many “standards” for video and audio 
formats. 

■ Three formats are in common usage, WebM, 
MP4/H.264 and Ogg/Theora. 

■ Know your audience to know what formats you need 
to supply. 

■ Use the <source> tag to specify alternative video 
formats. 

■ Use fully specified types in your <source> tag to 
save the browser work and time. 

■ You can continue to support other video frameworks, 
like Flash, by adding a fallback <object> tag in the 
video element. 

■ The video object provides a rich set of properties, 
methods and events. 

■ Video supports play, pause, load, loop and mute 
methods and properties to directly control the 
playback of the video. 

■ The ended event can be used to know when video 
playback has ended (for instance, to implement a 
playlist). 


■ You can programmatically ask the video object if it 
can play a format with canPlayType. 

■ The canPlayType method returns empty string (no 
support for format), maybe (if it might be able to play 
the format) or probably (if it confidently thinks it can 
play the format). 

■ Canvas can be used as a display surface for video 
to implement custom controls or other effects with 
video. 

■ You can use a scratch buffer to process video before 
copying it to the display. 

■ You can use a setTimeout handler to process video 
frames; while it isn’t linked directly to every frame of 
the video, it is the best method we have right now. 

■ You can use a URL as a video source to play 
network-based videos. 

■ Some browsers enforce a same origin policy on 
video so that you need to serve the video from the 
same origin as your source page. 

■ Errors are always possible, if not probable, with 
video, especilly when a network is involved. 

■ The error event can be used to notify a handler when 
video retrieval, decoding or playback errors occur. 

■ The video element relies on progressively 
downloaded video. Currently there is no HTML5 
standard for streaming, although the standards 
bodies are looking at HTTP-based streaming 
solutions. 

■ There is currently no standard way of protecting 
video delivered through the video element. 
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HTMLScposs 


Before you sit back and watch some more Webville 
TV, do a quick crossword to make it all stick. Here’s 
your Chapter 8 crossword puzzle. 



Across 

2. Type of delivery the video element uses for video. 

4. To provide several video options, use_source 

elements. 

5. Kind of buffer we used canvas for. 

7. Property to play your video over and over. 

8. Starts a video as soon as it can. 

11. The open source audio codec. 

12. Used to display processed video. 

13. When the show is over, this event is thrown. 

14.1 can play this type, can you? 

15. Look and feel of browser controls 


Down 

1. Use_if you want a built-in way to control video. 

3. We saw ’50s_films. 

5. What you should do if an asteroid is going to hit the earth. 

6. The Starbuzz CEO spills his_. 

9. What we processed on every setTimeout call. 

10. Clint Eastwood would like this effects style. 
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exercise solutions 


%|harpen your pencil 

Solution 


This book isn't really about video processing and effects, but 
it sure is fun. Below weve got the western and sci-fi effects. 
Look through the code and make notes on the right as to how 
each works. Oh, and we added an extra one—what does it do? 
Here's our solution. 


function western(pos, r, g, b, data) { 


var brightness = (3*r + 4*g + b) »> 3; 


data[pos *4+0] 
data[pos *4+1] 
data[pos *4+2] 


=brightness+40; 
=brightness+20; 
=brightness-20; 


The Ci^phasiz^s the red 

dr\d o-f -the pi%d while 

dc-C^phasiz-ih^ blue dompor\Ch*t ? bo 
give {ht video d bvoymish 


function scifi(pos, r, g, b, data) { 
var offset = pos * 4; 
data[offset] = Math.round(255 - r); 
data[offset+1] = Math.round(255 - g) 
data[offset+2] = Math.round(255 - b) 


The sdi-fi ^il*bc\r reverses the ar»\ouh*ts of 

So i-f a pi%el 

had a jo*t red, it w has a a. 

Pi^cl had d little AVrCCh, it Y\Oyj lids d |o*t : 


The bwda\rbooh -fil*tcr *tu\nr\s every pixel 
wi*th a ved dompohCr\*t o-f less *th 如 IZO 

(ou*t Z55) *m*to bladk ； ar\d -tuv-^s all 

o*thcv pixels *m*to whi*tC) video 

a y/cird dartoohy — like BflV 

} else { 

outputData[offset] = 255; 
outputData[++offset] = 255; 
outputData[++offset] = 255; 


outputData[++offset] = 255; 
++offset; 


function bwcartoon(pos, r, g, b, outputData) { 
var offset = pos * 4; 
if( outputData[offset] < 120 ) { 
outputData[offset] = 80; 
outputData[++offset] = 80; 
outputData[++offset] = 80; 
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not your father’s tv 



Watch it! 

This will 
change 
fast! So 
check 
the latest 
support on 
the Web. 



HTML5cross Solution 



you are here ► 
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9 storing things locally 



Web Storage 參 



Tired of stuffing your client data into that tiny 

closet COOkie? That was fun in the ’90s，but we’ve got much 
bigger needs today with web apps. What if we said we could get you 
five megabytes on every user’s browser? You’d probably look at us 
like we were trying to sell you a bridge in Brooklyn. Well, there’s no 
need to be skeptical — the HTML5 Web Storage API does just that! In 
this chapter we’re going to take you through everything you need to 
store any object locally on your user’s device and to make use of it in 
your web experience. 


this is a new chapter 
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history of browser storage 


How browser storage works (1995 - 2010) 

Building a shopping cart? Need to store some user preferences for your site? 
Or just need to stash some data that you need to be associated with each 
user? That’s where browser storage comes in. Browser storage gives us a way 
to persistently store data that we can use in building a web experience. 


Behind 
the Scenes 



Up until now there’s been one game in town — the browser cookie — for 
storing information on the browser. Let’s see how cookies work: 


When your browser retrieves a web page, say from u pets-R-us.com ,〃 
the server can send a cookie along with its response. Cookies contain 
one or more key and value pairs ： 


While I'm serving a web page 
to you, I’m also going to give you some 
key/value pairs to store for me. Next 
time you contact me, send them along 
with your request. 


l , i - - ‘ ♦ 


Pets-R-Us 


W* ealarto dMcnfnrvaong 
dog tnacai 

tot»Mt>ard 

rpcNImm. 



Witeria. XM tatowVw 
<ntw> and youl ㈣ m. 
ooen 10 -* «vwy day. 



r 


Browser 


blrov ^ the Cookie 
jo^lly dhd will s Ch d \i b^k io 
the sevvem the hext 七 ㈣ 吒 

l^dkcs d VC^UCS-fc. 


0 



I 



Web Server 


The tookic- 

Cookie : pet=dog; age=5; color=black 

r f w 

Wert art some key ar>d value pairs. We've ^o-t a key o( '\t{! wrth 
3 value o( w dof and a key o*f ^ so 


oyv" 
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storing things locally 



The next time the browser makes a request to 、 'pets-R-us.com ,〃 it 
sends along any cookies that were sent previously ： 


You gave me this cookie 
the last time I talked to 
you. Tm sending it back. 



Browser 


Cookies scht badk -fov-th ih 
eadh HTTP \rquest ahd v-cspohsc. 



Cookies av-c lW» 七 ed 

十 k cia*t3. 




Web Server 



The server can then use the cookie to personalize the experience, in 
this case promoting relevant items to the user, but there are many 
other ways cookies can be used too. 




Pets-R-Us 



•wwrw wi ww 

JUBt toSowtfw 

<n«w> tnd yowl Uvi\M 
WVr« 0(M0 10^ dt 


> 


Why thank you. Just wanted 
to let you know we have a big 
sale on products for middle-aged 
dogs that go great with black. 


Browser 


Cookies av-c assod'ia^ted >w’i 七 h a domain 

like w yts 一 R-usio 你" a 内 d ave or>ly 

scy>*t *to dornam- So, is y\o 

v/ay -pov* W Pc*U£mpov"ium.dom ， *to yt 
•rU \\Bv\ds oy\ *this dookic- 




0 



Web Server 


Cookies be used -PoV" 
all kihds o-(* purposes； 
like dus-tomizjhj the 

user's cxcHchdc, s-tov-i h g 

data, say ih a shopp— 
U\rt, o\r maih-taihihg the 
state <^f game. 


you are here ► 
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how web storage works 


Cookies have been with us a long time, but you might be able to think of some ways 
they could be improved on. 

Check all the items below that you think make cookies problematic: 


There’s only 4k to work with, my app needs more storage than that. 


Sending the cookie back and forth every time seems really inefficient, 
especially if I’m on a mobile device with not a lot of bandwidth. 


They sound like a good way to transmit viruses and other malware to 
my browser. 


I’ve heard the way the key/value pairs are done as part of the HTTP 
request is a pain to deal with in code. 


Aren’t we potentially sending personal data back and forth every time 
we make a request? 


They don’t seem well matched to all the client-side development 
we’ve been doing. They seem to assume everything in happening in 
the server. 


S^^M/A S^IA ^ e 产 P M P 5 对 S9(>,00? ^ S/AJU ^ ^ 














storing things locally 


How HTML5 Web Storage works 

HTML5 gives us a nice, simple JavaScript API in the browser for storing key/value 
pairs that are persistent. You’re not limited to four stingy kilobytes of storage either; 
all browsers today will gladly offer you five to ten megabytes of storage in every 
user’s browser. HTML5’s local storage was also created with web apps (and mobile 
apps!) in mind — local storage means your app can store data in the browser to 
reduce the communication needed with the server. Let’s check out how it works (and 
then we’ll jump head first into the API): 


Behind 
the Scenes 


羼 


A page can store one or more key/value 
pairs in the browsers local storage. 


UsM tV>e API ^ ^ 



A key/value fair. 




Browser 




Bvc\ry modc\rr) 

provides a 5 
megabyte (or 
loGl siomage bucket 

從 h dor^aih. 



localStorage 



S-tova^C IS fC\rs'»s*bc^*t> 

•，- f you dose you\r bv-oy/sev 
y/'mdoy/ or —*b b\roy/sc\r. 


And then later use a key to retrieve its 
corresponding value. 


Can I have the value 
for the key 、、 pet 〃？ 


a vaW 




W* ealarto OMcnnvMOog 
dog and cat omrm%, 
a r«n 9 * d »Mds trd 
yiownrtci for pa tovore 
T»m MMk. youeunQM your 
p«t« pteturv man wV) our 


W*9 tocmc fl 9t$ hMft 0 
Juat (stow Vit 
<n«v> and yowl In^tM 
W9t9 op»n d&f 




Browser 


Sure you can, 
ifs M dog〃. 



localStorage 


过0丁备 : T\\C SCV"VCV" S"ti|| SCV"VCS 
youir paacs, ahd you may cvch se^d 
3 bit o-r the ih you\r loddl 
S"to\rC -to the sc\rvcv- -fov- sor^e 
WW-side but the 

七 is dcalihg with the details 
lo^al s-fcov-age ； hot -the scv-vcv- 
( 3 s is dor^i^oh with dookics). 


Like Cookies, youv- short ar>d 

v-c*tv-cWc or^ly ’items *tha*t >wcv-c dveated 
by f>a^es scv*vcd -pvom -the same doma.m. 
Move oy\ *this m a bi 七. 


you are here ► 
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using web storage 


Note to self 


Need a system for getting things done? It’s hard to improve on 
the old Post-it note system (more commonly known as stickles). 

You know how it works: you jot down your “to do’’ item, stick it 
somewhere, and once you’ve done the task, you throw the sticky in 
the trash (or recycle it). 


How about we build one using HTML? Let’s see, we need a way 
to store all those stickies, so we’re going to need a server, and some 
cookies... oh, wait a second, back up the bus, we can do this with 
the HTML5 Web Storage API! 



The Wlcb SWajc API 

simple ,( \ay\ 

VJt promise! 




No fooling around, we’re going to jump right in and start using the local store. To do that 
you should create a simple html page with all the basics: a head, a body, and a script (or 
just use the starter file notetoseif. html in the code examples). Follow along by typing 
the code into your <script> element (typing it in helps it stick): 


There’s not much more to a sticky than the text you write on it, right? 
So, let’s start by storing a sticky for “Pick up dry cleaning ”： 


TKc Web S-tov-ay API available -to 

V ou UalSkay okjett. 

You II tW.s already dtUtd W 
Vou kv Woy/scv-. you use it 

youVc use o-f 

lo^dl s-tov-a^c system- 


The set I method 

■takes two stri 呼 as 、 
*tha*t adt as 
the key/value fair. 


\ 


s-b\rti h g simple but 
you khow \i, well 
hve a whole St^kics app 
“P \ruhhihg. 

You ddr\ or\ly s*to\rC items o-f 

•type Vou da^*t div-c^ly 

s*toV"C r\ur»'bcv"S ov objefi^ts (bu 七 
y/cll f md a 如 ay *to ovevtome 
七 iiis soorO. 


localstorage • setltem (’ ’sticky—O'', "Pick up dry cleaning") 

， ▲一 K 


Jo stove v/c use 

{\\t sc*tl*tcw' w»c*tV^od. 


Thc f ^ av- 3 umch-t 
is a key "that "the I'tcru 

,s 如 '^ u ^dc\r. Name ii 
whatever you wah-t as | 

’七 is a s-t\rihj. 


Ioh0 ds 


The sedo^d s-tv-mj 
is -the value you’d 
like *to s*to\rc m lodal 
s-tov-ajc- 
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Q 


That was easy enough; let’s add a second item to the local store: 


localStorage.setltem("sticky l n , "Cancel cable tv, who needs it now?"); 


/ 

key- L'»kc said alv-cady^ 

you use key you l'»kc as lo^ as 
•rt is a W*t you o^ly stov-c 
or^e value \>cv- key. 


A value "fco 0 o with 

ouv hew key. 


o 


Now that we have two values stored safely in our browser’s local storage, you can now 
use one of the keys to retrieve its corresponding value from localStorage. Like this: 


gc-ttmg the value associated wi-th -the 
key u stidky__O w -fv-c 


the lodal s-fcovc. 


...av\d ass'i^m^ i*t *to *tV^c 
^ vdvidblc sticky- 




var sticky = localStorage.getltem("sticky_0"); 

alert (sticky) f —、 ^ hd this a liUlc moire i^esi'ma, let s use ihc alcvt 

+uh^ioh io pop the stidy hole s value up oh the s^cch. 


Time for a test drive! 


Make sure you’ve got all this code into your script element and load it into your browser. 

Here’s the result of our test drive: 

ouv 严如 

^ value of st ， 6k V ^0 as ale,*t 心 ay. 



JavaScript 

Pick up dry cleaning 


OK 




IVhat s too\ about iW\s is that this value was 
sWd m ahd \rcl\ricvcd -Plrom the bv-owsev-s 
lodal£tov-agc \4u dould ^uit youv- bv-owsev-, ao 
Oh vadatic -to Fiji ^ a dow bad, 
ahd it will still be thcv-c waitmg oh you. 

Okay, okay, we aj\rcc 七 he example 
dould have beeirt a li-t-tlc mov-c 

but v/o\rk v/i 七 h us hev~e, 
wcVc -thc\rc - 


you are here ► 
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how the local storage a pi works 


That was cool, but 
can we walk through it? 
I'm not 100% sure what 
happened. 


Sure. Here it is in a nutshell: your browser 
provides you with a local store — space on your 
own computer, in your browser — that a page can 
make use of to store key/value pairs. You created 
a few key/value pairs, stored them away using 
the local storage API, and then you retrieved 
one of them for use in your app. Now, while that 
might not be the most exciting example, there 
are lots of interesting things you can do with a bit 
of storage in every user’s browser (and we’re sure 
you can think of at least a few). 

So now that you’ve got an answer in a nutshell, 
let’s step through in detail what just happened: 




First, remember every browser has a bit of local 
storage that you can use to store key/value pairs. 




bv*oy/scv* V^3s \oC3\ 
s-tov-ay kcK'md 
sttv\ts v-cady 

-fov- Y ou *t° uSC 
s-bov-c key/value 

pa'ivs. 


localStorage 
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storing things locally 


With that local storage you can take a key and a value (both in 
the form of strings) and you can store them. 


localStorage.setltem("sticky 0 


Wc use set Item *to 

short a kcy/valuc paiv-. The key is 
w s*tidky — by\A the value is w Pidk uf 
dry 

^cy/valuc \>a'»v- treated 
by se*tl 七 e 州 . 


Pick up dry cleaning"); 



Ouc youvc plated key/ 
value pm lotalS-tov-ay, »*b 
•,s fcv-s'istc^-tlY stored *fov- y ou > 
ever\ you c\ost *tKc kv-oy/sev- 

y/mdov/, 十七 Y 0 价 or 
reboot Y ou，r tow '? u ^ c，r， 


We then called setltem again and stored a second key/value pair, 
this time with a key of 、、 sticky_l 〃 and a value of ''Cancel cable tv, 
who needs it now?’’. 


localStorage 


localStorage.setltem("sticky 1 


key: 

‘sticky」” 

value: "Cancel 
cable, who 
needs it now?JI 


Cancel cable tv, who needs it now ?’’） 

Kov/ avc b*JO values 

shored uhdev- *tv/o um«\uc keys. 



key: 

“ sti Wr，\ s _- 0 ” 

value: l^lue. 

“Cancel cable, U P dry 

who needs it^ J ' ean ' n 9^ 


And when we call getltem with a key of u sticky_0 ,, / it returns 
the value of the key/value pair. 


i 

Pick up dry 
cleaning ), 


localStorage.getltem("sticky 0"); 


-f mds 3r\ iicn\ Y/iih 9 key c^ual -fco “s*tidky—O w 
(if rt exists) artd vrtuv^s its value- 


localStorage 


Ko*tc by yttmj By\ i*tcw\ v/C d 。 灼’七 \rcmovc i*t -f\row\ *thc s*to\rc ； 
i*t’s s*till IVlcVc jus*t value -fo\r key. 


you are here ► 
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questions about local storage 



First you said “Web Storage” and then you started talking 
about “local storage." Are they the same? 

The Web standard is named “Web Storage” but most people 
just call it local storage (in fact, the browsers even expose the API 
through the localStorage object). Web Storage is actually not the best 
name for the standard (because items are stored in your browser, 
rather than on the Web). But that said, we’re stuck with it. You’ll see 
us use the term local storage more than the standard name of “Web 
Storage.” 

How widely supported is the Web Storage API? Can I 
count on it being there? 

Yes; in fact it is one of the better supported APIs, even all the 
way back to IE8 and is now in most modern mobile browsers. There 
are a few caveats here and there, but we’ll point them out as we 
go. In terms of counting on Web Storage, as always you should test 
before using APIs. Here's how you test for localStorage: 
if (window["localStorage"]) { 

// your localStorage code here... 

} 

Notice that we test by checking to see if the window global object has 
the localStorage property. If it's there, we know the browser supports 
localStorage. 

At the very beginning of the chapter you mentioned 5MB 
of storage on each browser. Is that five megabytes total across 
all apps? 

No, that is actually five megabytes per domain. 

You said the server didn’t need to be involved, but then 
you started talking about domains. 

Right, all the storage is managed in the client. The domain 
comes in because five megabytes is allocated to all the pages from 
the same domain for storage. Pet-R-Us.com gets five, PetEmporium. 
com gets five more, and so on, all on your machines. 

How does this compare to Google Gears [or insert your 
favorite proprietary local storage technology here]? 


There's nothing wrong with other browser storage technology, 
but HTML5’s local storage is now the standard (and Google, Apple, 
Microsoft and others now recognize Web Storage as the standard 
way to store content locally in the browser). 

What happens if I perform a setitem on the same key 
multiple times. Say I called setitem twice on n sticky_l n , 
what happens? Do I get two sticky—l’s in the local store? 

No. Keys are unique in localStorage, so setitem will overwrite 
the first value with the second value. Here’s an example; if you ran 
this code: 

localStorage.setitem("sticky_l", "Get Milk"); 
localStorage.setitem( M sticky_l M , "Get Almond Milk"); 
var sticky = localStorage. get Item (’’sticky ■ 一 l n ); 


The value of sticky would be “Get Almond Milk”. 

Who can see the data in my local store? 

Local storage is managed according to the origin (you can just 
think of the origin as your domain) of the data. So, for instance, every 
page on wickedlysmart.com can see the items stored by other pages 
on that site, but code from other sites, say, google.com, can’t access 
that storage (they can access only their own local storage items). 


When I’m loading a page from my computer, like we are in 
these exercises, what is my origin? 

Good question. In that case your origin is known as the “Local 
Files” origin, which is great to use for testing. If you have access to 
server you could test your files there too, and then you'll be in your 
domain’s origin. 



Local Storage may not work 
properly in bII browsers if 

you're using file:IL 

This is another case where some 


browsers require that you serve pages 
using local host:// or a hosted server, rather than 
loading from a file. So if your stickies aren't working, 
try running from a server or try a different browser. 
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storing things locally 


Joel 


So, I can store strings in localStorage, but what if I want 
to store a number? I was thinking I might use localStorage 
to store integer item counts and floating point prices for a 
shopping cart app I want to write, is this the wrong technology? 



You’ve got the right technology. 

It’s true, with localStorage you can only use strings as keys and values. But, that’s 
not as restricting as it sounds. Let’s say you need to store the integer 5. You can store 
the string “5” instead, and then convert it back to an integer when you retrieve it from 
the local store. Let’s take a look at how you’d do this for integers and floats. 

Say you want to store an integer with the key “numitems”. You’d write: 


localStorage • set Item (’ 'numi terns, 1) 


1/^Ka-t? V/C just say v/c 

匕 ould 灼’七 s*to\rc m-teyv-s? 


Okay, it might look like you’re storing an integer here, but JavaScript knows this 
needs to be a string, so it coerces the integer value into a string for you. What 
setltem actually sees is the string “1”，not an integer. JavaScript isn’t as smart when 
you retrieve a value with get Item: 

var numl terns = localStorage . get Item ("numi terns"); 

In this code, numl terns is assigned the string “1”，not an integer as we’d like. To make 
sure numltems is a number, you need to use the JavaScript function parselnt to 
convert a string to an integer: 

/ — Wlc v/vap the value m a pavscl^t dall ； 

1C dor\VC\rfes -the s-tv'ma -to 


Wc 々 

add I *to it 

because rt’s 


var numltems = parselnt(localStorage.getltem("mamiterns")); 
numltems = numltems + 1; _ _ s*tovc »"t 


localStorage. setltem("mamiterns" , numltems) 


T\\tv\ v/C 

tav-c of 

£.oy\Vcv-s'»oy\ 

If you’re storing floating point values, you’ll want to use the parseFloat function 
when you get the price items from localStorage instead: 

/— Sa^c V/C a float 

V value »s CoerCtA m-to d sVm} 

localStorage.setltem("price", 9.99); 

var price = parseFloat(localStorage.getltem("price")); 

v/C toywwt rt kadk *to 
a -float v/Vth pavscFloat 


you are here ► 
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how local storage is like an array 


Were Local Storage awd the Array separated at birth? 


Local storage has another side you haven’t seen yet. Not only does local Storage 
provide the getter and setter methods (that is, get Item and set Item )， it also 
allows you to treat the localStorage object as an associative array. What does that 
mean? Well instead of using the set Item method, you can assign a key to a value 
in the store like this: 


localStorage["sticky 0 n ]= 

厂 

Hcv-c, key looks l»kc 

mdc% -fov- i\\t s*tovay av-v-ay. 


We can also retrieve the value stored in a 


Pick up dry cleaning"; 

here’s ouv- value 
oy\ -the 

side o*f an 

key this way too. Here’s the syntax: 



var sticky = localStorage ['’sticky 一 0 n ]; 




we dssi^h ouv* 


'This y/o\rks like us'mj the dal I 

*to the method- 


variable stidy -to... value ^ 

’ \m lotal stov-c. 


Not bad, huh? So, use either syntax, they are both valid. But if you are used to using 
associative arrays in JavaScript, this syntax may be more concise and readable for you. 


Put wait, there's more! 


The localStorage API also provides two other interesting things: a property, length, 
and a method, key. The length property holds the number of items in the local 
store. You’ll see what the key method does below: 


Hcv*c v/cVc 
ovcv* 


The length pvopev-ty 七 ells 
us Why items av-C ih 

lo^alS-fcovagc. 


for (var i = 0; 

var key = 
var value 


L < localStorage.length; i++) 
localStorage.key(i); 

=localStorage[key]; 


Big pidiur e: wcVc us'mg the *to 

i*tcv-a*tc ovcv the do^*tc^*b o-f lotalSWajc 
(just like av\ av-v-ay), addcss'mj cadh key 
Hike w s*tidky__O w ) as wc ^o. I/Vlc ⑶ use 
■that key *to c>c*t\rad*t its do\rv-cspo^d'mj value. 


alert(value); 


Po\r ca^h i 七 em m 七 he lodalS-fcov-agc, -the 
key rweihod jives us 七 he key (like 
、七 idky」)”, 、七乙 ky 」 "a 灼 d so orJ. 


6\o dKedd jive \i a 

*b*y … do you yt 扣 

alcv-t *fov* eaA itcw'? 


The 灼 y/ith the 

key r^arwc y/C C^y\ 
v-c*t\ricvc the value- 
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Dumb Quest? 


9ns 



When I iterate through localStorage using 
localStorage.length and localStorage.key, what order 
are the items in? The same as the order I wrote 
them into the store? 


The Shell Gme 


Actually the order of the items isn’t defined. What 
does that mean? It means you’ll see every key/value 
in the store by iterating, but you shouldn’t count on any 
specific order in your code. In fact, different browers may 
give you different ordering for the same code and items. 


Ready to try your luck? Or should we say skill? We’ve got a game for you 
to test your command of localStorage, but you'll need to be on your toes. 
Use your knowledge of getting and setting key/value pairs in localStorage 
to keep track of the pea as it shifts from shell to shell. 

function shellGame() { 

localStorage.setltem(，▼ shelll, "pea"); 

localStorage.setltem( n shell2 n , "empty"); 

localStorage.setltem("shell3", "empty"); 

localStorage[ M shelll"] = "empty"; 

localStorage["shell2"] = "pea"; 

localStorage[ M shell3"] = "empty"; 

var value = localStorage. getltem (’▼ shell2"); 

localStorage.setltem( n shelll M , value); 

value = localStorage.getltem("shell3 M ); 

localStorage[ M shell2"] = value; 

var key = n shell2 M ; 

localStorage[key] = "pea"; 

key = "shelll"; 

localStorage[key] = "empty"; 


-to use this 

spade -to keep ^ 

the sta-tc o*f 士 


key = n shell3"; 
localStorage[key] 


empty' 


for (var i = 0; i < localStorage.length; i++) { 
var key = localStorage.key(i); 
var value = localStorage.getItem(key); 
alert(key + " : " + value); 

} You type i-t ih -to 

check youv ahswcir ahd see 


shell has -the pea? 
I/Vvitc youv heve: 



\/aluc 

shelll 


shclIZ 


shelB 



Wdh shell -the pea is ih. 


you are here ► 
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storage technologies chat 



Tonight’s talk ： Cookie and Local Storage 

Tonight we have the incumbent browser storage technology, 
the “Cookie” along with the new front runner, Local Storage. 


Cookie: Local Storage: 

There he is, the golden boy, Local Storage. I’ve been 
in this business for over a decade and you think you 
can come along like you know something. A little 
wet behind the ears, aren’t you? 

Sure, you could look at it that way, or, you could say 
I was built from all the experience gained from your 
mistakes. 

Do you have any idea how many pages I’m used on? 

Ever looked at your stats? 

Give it a few years and take another look. The 
reality is I’m helping to enable a whole new 
generation of web applications in the browser. A lot 
of those pages you mention, am just pages. 

Hey, I’m ubiquitous, pervasive, everywhere! I don’t 
think there is a browser on a desktop, device or 
mobile browser no matter how old, where you won’t 
find me. 

I’m catching up fast. Of all the HTML5 
technologies, I’m one of the best supported. 

We’ll see. Just what exactly do you think you offer 
over me? My storage works just fine. 

Well, I’m not sure I want to mention this in public, 
but you do have a size issue. 

I have no idea what you’re talking about. 

Hey, you started all this, not me. You know very well 
that you are limited to 4K of storage, I have over 
1,200 times that! 
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Cookie: 

Yeah, I’m light, nimble, we might even say agile. 


Gome on, I’m an open book, just pure storage to 
put whatever you want in. 


Oh, and key/value pairs are some great innovation? 


<Snicker> Oh yeah, and you store everything as a 
string! Nice work! </Snicker> 


Yeah yeah, call me in ten years, we’ll see if you’ve 
stood the test of time. 


Local Storage: 


Ha, that’s rich. Have you ever talked to a web 
developer? You’re anything but agile. Given you are 
Mr. Statistics, do you have the stats on the number 
of developer hours lost to stupid mistakes and 
misconceptions using cookies? 


What you really mean is you essentially have no 
data format at all, so developers have to reinvent a 
new scheme for storing data in cookies. 

We don’t need great innovation on storage; key/ 
value pairs work great, are straightforward and fit 
many computing applications. 


You can get a lot of mileage out of strings, and if 
you need something more complex there are ways. 


Oh you can bet on it. Face it, you were doomed 
from the start. I mean come on, who names their 
kid Cookie? 


You’ll see, you’ll be calling me crying when they say 
“Haha, 5 megabytes, is that all you got?” 


you are here ► 
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the stickies app 


ftettmg serious about stickies 


Now that you’ve had a little time to play with Web Storage, let’s take this 
implementation further. We’re going to create a Sticky Notes application 
so you can see your stickies and add new ones. Let’s take a peek at what 
we’re going to build before we build it. 



We Y\ttd a v/ay *to add ^ 
st.tk.cs. So y/cll a \orrr 

y/rth 扣 a^d a button. 


The Sticky Notes aff will 
show us Y\o{,ts \y\ loUl£*to\ray 
a^d le 七 us add y\c^i oy\cs. 


(-P wc hdve 


Y ou 乙 l' 1 乙 k 

Add S-t'itky 

Ko*tc *to Scl-f) a 
vxYt stitky v/'»H 
be added *to 
lotalS-tov-ay- 

l/Vcll also see the 
display updated 
with 3ny r\Cv/ 
s*ti£.kics ; By\A well 
addomflish that 
by addm^ a y\c^i 

*to the 

POM -fov 
s-tidky. 





localStorage 

existmg s-tidkics i h 
sWagc, wc wah-t -to see them 

wkh wc load the page. Like the 
tw 。 s-ti^kics wc aliready have. 


#4 0 0 

Note to Self 



► 

1 + 

0 http://local host/-Beth/Head-First-HTML5/chapter9/notetoself.html C [Qj 




Add Sticky Note to Self: 


Pick up dry 

Cancel 

cleaning 

cable tv, 


who needs 


it now? 

"" r 



To display 
s-tidkics, well 
iicv-atc -thvoujh 
all 七 he s-tidkics 
•m lodalS-tov-a^c, 

d 灼 d add therw 

io -the VOM- 



-the keys -Pov- 

■Uo s-tidkics t Vtidky_jD” 

釙 d Y*^ k yJ W IVcVc gdhg h> 

keep -followihg oum dohvchtioh 
Ad C\rcaie keys -Pov- silkies 
with ih^\rcrnch*tihg ih-tegevs, like 
shdcyjl, stidy_3 ; ahd 


I/Vcll style the s-tidkics usmg 
CSS so -they look like v-cal 
stidky r\oicsj 


so Oh. 
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storing things locally 


Creating the interface 

To start, we need a way to enter the text of our sticky notes. 
And it would be great if we could see them in the page, so 
we need an element to hold all the notes in the page. 

Let’s work on some code to do that, starting with the 
HTML markup — take your existing HTML file and add a 
<form> element, the <ul> element and the CSS link to it, 
like below: 


fWs ou\r mdih HT/WL -file- 



<!doctype html> 

<html> 

<head> 

<title>Note to Self</title> 

<meta charset= 〃 utf-8〃> 

<link rel="stylesheet M href="notetoself.css n > 
<script src= n notetoself. js M X/script> 

</head> 

<body> 

<form> 


m a l»Ulc CSS -to make 


s*t»£.k»cs. 

^ccl W-to eMcCk out -tKc source! 


WfeVc *to move b \\ ouv JavaScript 
{o the -pile w ^o-tc-toscl-pjs w . 


^ added a as s 

-to Ch-tcv studies. 


USCV- 


<input type="text" id= n note_text M > 

<input type= n button" id=”add— button” value= M Add Sticky Note to Self n > 
</form> 


<ul id= n stickies"> 
</ul> 




</body> 

</html> 



y/c VC -to V^avc so^cy/Kc^c *to 
plate ouv- stitk'ics m *tKc mtev-fate, 
so y/cVc *to m a 

uy\ovdcv*cd l>s*t- 


The CSS handles 

^ kih 9 ^ lisi ii Cn) 

°Z k f ^ like 
a Pos*t—j-t ho-fcc* 


you are here ► 


429 





writing the stickies javascript 


Now let's add the JavaScript 


We’ve got everything we need in the page now, and we’ve got a couple sticky 
notes in localStorage waiting to be displayed. Let’s get them on the page 
by first reading them from localStorage and then placing them inside the 
unordered list element we just created. Here’s how we do that: 


i\>t pay »s loaded >/cVc 
吒 *to ull 七 ^ 七 七 10 〜 


window.onload 


init 



..v/hidh reads all -the 

s*ti^kics -f\rom I 。 乙 dl&tordy 
adds -them -to -the <ul> 
through the VOM' 

do that yjc itcv-a-tc 
ovcir all items m ihe sW. 


function init() { 

for (var i = 0; i < localStorage.length; i++) 
var key = localStorage.key(i); 
if (key. substring (0, 6) == '▼ sticky 

var value = localStorage.getltem(key); 
addstickyToDOM(value); 

} 

^ iVs a s-ti^ky, yab 

its value a^d add i*t *to 

} ouv- fajc (via the VOM)- 


^v-ab eadh key. 
f\Y\d ⑼ y/e make suve 七 his 
i-tem is a sticky by 
{fi see i-f I*b key bc^ms W\i\\ 
u s*ti^ky w . VVliy do y/c do 

Well tiicv-c m •吵七 be o 七 iiev 
i*tcms stov-cd m lodalS*tovay 
oi\\tr ouv stitkics (move 
ov\ 七 his m 3 bi*t). 


So now we need to write the adds tickyToDOM function, which is going to insert 
the notes into the <ul> element: 

WcVc passed *thc <Jc the s-tidky 
灼 o*tc. I/Vc Y\ttd *to dv-catc a list item (or the 

function adds tickyToDOM (value) { u^o\rdcV"cd lis*t d^d msev-t i*t- 


var stickies = document. getElementByld ( n stickies n ) ;卜 S 。， let's *thc w sti^kics w list element 

var sticky = document.createElement("li n ); } y ^ 

(^ Create a list clcmchi a^d give 
var span = document.createElement ( n span") ; ] _ it a dass o( 'stidky^ (so 

we da" style it). 


span.setAttribute("class", "sticky"); 
span.innerHTML = value; 
sticky.appendChild(span); 
stickies.appendChild(sticky); 



一 Sc*t o-f spaw holdmg 

o-f s*ti^ky 

A^d add the spa^ -to the 
w s-tidky W li, By\A the li "to the 

w sti 匕 kies” list. 
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Time for another test drive! 

Go ahead and get this code into your script element and load it into your browser. 
Here’s what we got when we loaded the page in our browser: 


H O O Note to Self 

< ► I + f ^ http://localhost/-Beth/Head-First-HTML5/chapter9/notetoself.html 




Add Sticky Note to Self) 




Pick up dry 

Cancel 

cleaning 

cable tv. 


who needs 


it now? 

1 - 1 


Completing the user interface 

Now all we need to do is enable the form so we have a way to add new notes. 
To do that we need to add a handler for when the “Add Sticky Note to Self” 
button is clicked, and also write some code to create a new sticky. Here’s our 
code to add a handler: 


this Code *to youv mi*t 
function init() { [/ 

var button = document • getElementBy Id ( n add 一 but ton’▼) 
button. onclick = creates ticky; A. _ 


// for loop goes here 


The vest todt 


Lets ^\rab a 

\rc-fc\rchdc "to the 

"Add St.dy Hoitio 
button. 


f[Y\d add a 

-Pov it is dlidkcd- 

dall ha^dlcv 


•m mi*t s*tays -the same； 
y/cVc sav'm^ a -fev/ *tv-ccs 
by 的。七 v-cpcatmj i*t hcv-c. 


you are here ► 
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creating stickies with code 


And the code to create a new sticky note: 




W\\tY\ the butto 的 is dlidkcd, 

•this ha^dlcv is invoked. 


厂 1 七 -Pi\rst \rcl\ricvcs the text ih 
the -rovrw -text box. 


function createsticky() { 

var value = document.getElementByld( n note_text n ).value; 

var key = M sticky_ n + localstorage. length; ^ - Tiicr\ v/C r\tt& *to 3 urM^uC key 

^ov s-ti^ky. Let's use u s*titky_ w 


localStorage•setItem(key, value); 


Cor\t^tv\a{,tA cJc "tiic 

cr\*tiV"C s*to\rcj i*t >w»ll keep mtvc3s'm^> vi ☆ 七？ 


addstickyToDOM(value); 

/W -P'mally, wc add i\\t 
Y\t^i *to *thc Pom "to 
v-cfv-csc^*t the sticky. 


Thch wc 3idd 3i hew s-ti^ky -fco 
us'mg ouv* key. 


Yet another test drive! ^ 

Now we’re truly interactive! Load this new code in your browser, 
enter a new “sticky note to self” and click or tap the “Add Sticky 
Note to Self” button. You should see the new sticky note appear 
in your list of stickies. Here’s what we see: 


You da^ take i\\ai Vip *to P\j'» 咖 ，扣 d 
you co^t bad, youv stickies v/ill 

still be tiicvc -fov youf 


The key -for this stidky is 

“stidky 一 2-' "the o( -the s*to\TC 

(bc-Po\rc wc added it) do^da*tc^a*tcd 
with w s*tidky__ w . 






/chapt*r9/oo(«tMtlf.hbni 






>SdQ 



Heve’s ouv *tcs*t 


Y\AY\ 


3°°' 


I Looks 

d> 


Pick up dry 

Cancel 

Buy another 

cleaning 

cable tv. 

Apple 


who needs 
it now? 

gadget 
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Make suve you *tvy dosir^ youv 
bvoy/sev y/mdio>M a^d oper^m^ 
i\^t -file a^a'm. Still see i\\t stidics? 























storing things locally 



Dumb Quest! 


9ns 


Why do we test to see if each item’s key begins with the 
string “sticky ”？ 


A 


Each browser maintains its own local storage. So if you create 
stickies in Safari, you will only see them in Safari. 


Remember that all the pages from one domain (like apple.com) 
can see every item stored from other pages in that domain. That 
means if we aren’t careful about naming our keys, we could clash with 
another page that is using the same keys in a different way. So, this 
is our way of checking to make sure an item is a sticky (as opposed 
to say an order number ora game level) before we use its value for a 
sticky note to self. 


What if there are lots of items in localStorage, including 
lots of items that aren’t stickies? Wouldn’t it be inefficient to 
iterate through the entire set of items? 


Well, unless you are talking about a very large number of items 
we doubt you’d notice a difference. That said, you’re right, it isn’t 
efficient and there may be better ways to approach managing our 
keys (we’ll talk about some of them shortly). 

wondering about using ,oc,S«orage.,n g th as the 
sticky number in the key. As in 

’▼sticky—" + localStorage. length 
Why did we do that? 


I just reloaded my page and now my stickies are in a 
different order! 

When you add a new sticky note, we add the new sticky note 
item by appending it to the notes list, so it always goes at the end of 
the list. When you reload the page, the notes are added in the order 
they’re found in localStorage (which, remember, isn’t guaranteed to 
be in any particular order). You might think that the order would be 
the same order that the items were added to the store, or some other 
reasonable ordering, however, you can’t count on that. Why? Well one 
reason is the spec doesn’t specify an ordering, so different browsers 
may implement this in different ways. If your browser does appear to 
return items in an order that makes sense to you, consider yourself 
lucky, but don’t count on that ordering because your user’s browser 
may order your items another way. 


I often use the “for in” form of the for loop. Will that work 


here? 


Sure will. It looks like this: 


TW»s Will iWatc 七 Wou 吵 
key m lotalS-tov-ay- 


for (var key in localStorage) { 


We need some way to create new keys that are unique. We 
could use something like the time or generate an integer that we 
increase each time. Or, as we did, we can use the length of the store 
(which increases each time we add an item). If you are thinking this 
might be problematic, we’ll come back to that. And if you hadn’t 
thought about it being problematic, no worries, we’ll still come back 
to it. 

reated a bunch of stickies in Safari and then switched to 
Chrome, and I don’t see any of my stickies in Chrome. Why not? 


var value = localStorage[key]; 

} 

What if I don’t want a sticky any more? Can I delete 
stickies? 

Yes, we can delete items from localStorage using localStorage 
remove Item method. You can also remove items from localStorage 
directly using the browser console. We’re going to show you both in 
this chapter. 






Given the way stickies are implemented, there would be a problem with our naming 
scheme if a user could delete a sticky at will. Can you think of what the problem is? 


you are here ► 
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diagnosing browser storage 


Wc need to stop for a little scheduled service 


Wouldn’t it be great if there were a tool to directly view the items in 
your localStorage? Or a tool to delete items or even clear the whole 
thing out and start over when you are debugging? 

Well, all the major browsers ship with built-in developer tools that 
allow you to directly examine your local store. As you might expect, 
these tools differ between browsers, so rather than covering them 
all here, we’re going to point you in the right direction, and then 
you can dig in and figure out the specifics of your own browser. As 
an example though, let’s see what Safari offers: 





Todays Sfctial 
Flush youv 
b\rov/scv- ； s 

lodalS^bov-a^c 


I^VC Oh -the 

-bb -to ihspe^-t 

lodalS-fcovagc. 


Elements 



Not "to y\C^i 

vcv-sio^s o-f *thc bv-owsev-s 

-Pastcv- 

y/C CBy\ v/v-i*tc 




Developed -tools as -they appear 
•m the Sa-Pav-i bv-ov/sev-. 


Web Inspector — http;//IocalhoEt/~Beth/HTML5/LocalStorage/notetoself.html 


Resources Network Scripts Time \ne Profiles Audits Consol 


Search Resources 


T Q Frames 
► 亡 ] Ciindex.hlml] 
► : Databases 
▼ : . Local Storage 


local host 


► H Session Storage 

► Cookfes 

► j_P ： Apfk\catton Cache 



Key 

cax 

stic:ky_2 
Stic ky_0 
sticky_l 


Valje 


Clidkmg v/ill 


Oliver 


Gjy another Apple gadget 

Pick up dry cleaning 

Cancel cable tv, who needs it now? 


show you 



T^c kcy/^luc \>a»v 

-(*OV* I'tcw' 

S*boV"C »s Kcv*c. 


七 he s-tov-ajc associated 

wi*th this o\ri^m. 


Well talk abou 
Old skool dookics i-P you 


U 


>E 


6 

X 


this latcv-. 


By \rijh*b-dlidk'mg oy\ oy\C 
o-f *thc items you 

taY\ edit o\r delete the 

\ri^h*t m *thc tool. 


M 


丁 he oHgih <^P the s-fcovaac. Wert 

us, ^9 -Piles served -W-c _ ,, 

lodalhos-t, but this rwigli-t also be a doma 
harr»c i-P you a\rc testihg Oh a hosted sc^vc^. 


v/C \rc 
Vom http:// 


I 的 £a-fav*i, >wc tav\ use -tools -to v-cload i\\t 

S*fcov3^c v'ic>w> dr^d delete a sdcd*tcd 



m 


To enable or access the developer tools, as we said, you’ll need to do different things for different 
browsers. Point your browser to http : // wickedlysmart. com/hfhtml5/devtools . html 
to see how to do this on your specific browser. 


434 Chapter 9 


































storing things locally 


Po-lt - Yourself maiwtewawce 


There’s another way to clear out your items (and as we we’ll see in a bit, to 
delete them one by one), which requires doing a little maintenance on your 
own, right from JavaScript. The localStorage API includes a handy method, 
clear, that deletes all items from your local store (at least, the ones from your 
domain). Let’s take a look at how we can use this call in JavaScript by creating 
a new file named maintenance . html. Once you’ve done that, add the code 
below, and we’ll step through how it works. 


<!doctype html> 
<html> 



"This is a 0ood "tool 
youv "toolbox. 


<head> 

<title>Maintenance</title> 
<meta charset= n utf-8 n > 
<script> 

window.onload = function() { 



vc added ov\t Wtto” *to 
七 he pay, *tW»s code adds 

a c\\cV Ka^dlc^r ^ -tKc Wtbw. 


var clearButton = document.getElementById( n clear 一 button ”）； 
clearButton.onclick = clearstorage; 


function clearStorage() { 
localStorage.clear(); 

} 

</script> 

</head> 

<body> 

<form> 



you didk the button, 
dlcav-S-tovajc is ddlled- 



All "this -fuhdtioir> does is dal I -the 
lodalS-tovajc dlcav- method. Use y/i-th dautiem 


as i-t will delete all -the items assodia-ted 
wi-th the ovij'm o( -this 


<input type ： 
</form> 


</body> 

</html> 


'button" id= n clear button" value= M Clear 
1 - 

ou\r button. Wse "this file 
y/hc^cvc\r you ^ccd b> cv-asc 
m lodalS^toirajc (jood -Pov* 


After you’ve typed in the code, go ahead and load it in your browser. 
It’s safe (with regards to our Sticky Notes app) to go ahead and clear 
your localStorage now, so give it a try! Make sure you’ve figured out 
your developer tools first so you can observe the changes. 


storage" /> 



Vatcliit! your 

domain! 


If you’ve got a super 
valuable local store related 
to another project in the 
sam e domain, you’ll lose 
a 11 your items by running 
this code. Just ssyin \ 


you are here ► 
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a problem with stickies 


O 



Ive got an issue. While Ive been doing the exercises 
in the book, Ive also been using my knowledge to create 
our company's new shopping cart. My Sticky Notes app stopped working. 

When I look at localStorage with the Safari dev tools, I see that my 
sticky counts are all messed up, I have ''sticky—O' ''sticky 」 ' 、、 sticky_4〃, 
''sticky—8' ''sticky—15' ''sticky—16' ''sticky—23' ''sticky—42”. 

I have a feeling this is happening because I*m creating other items in 

localStorage at the same time as the stickies. 

What the heck is going on?! 


Ah, you’ve discovered a major design flaw. 

Alright, it’s time to come clean: we’ve built a great little 
app so far, and it should work perfectly for years to come as 
long as you don’t introduce any other items into the localStorage 
(like Joel did with his shopping cart). Once you do that, our 
whole scheme of tracking stickies no longer works, or, at 
least, no longer works well. Here’s why: 

First of all, our sticky notes are numbered from zero to 
the number of stickies (minus one )： 

o o o o o 

“sticky_0” “sticky」” “sticky_2” “sticky_3” “sticky_4” 


|-f youVc 

{p live 
dool ； 

you bettev keep 
veadrn^- 


Five ⑽七 es, labeled -P\rom zj^co ho -Pouv-. 


To add a new sticky, we count the number of items in the 
local store and create our new key from that number ： 

var key = n sticky_ n + localStorage.length; 

And to display all the stickies, we iterate from zero to “sticky_5” 
the length of the local store (minus one )： 




is 灼 ov/ s\y,, so i*tc\ra*bc 2 jCV-o *to -five, display'm^ 

灼 o*tc -from W s-titky — -to W s-ti^ky — 
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Now let's add JoeFs items from his shopping cart to localStorage ： 

o o o o o o 

“sticky_0” “sticky_1” “sticky_2” “sticky_3” “sticky_4” “sticky_5” 


ttcv-c av-c Joel’s rtems "that he’s 
usmj m his sho^'m^ dairt todt- 

o 

“shopping “shopping “shopping 
cart item 1 ” cart item 2” cart item 3” 



y/e V^dve v\\v\t -total i*tcrws m lotalS-tovay- 


And let's create a new sticky ： 

var key = n sticky_ n + localStorage.length; 



“sticky_9” 

ou^r „ew siidy, -the lo^al sW^s Ic^lh is k>ow so 

we ercaic a ..o-tc i^ai dots^i scer, 叫 ht 


When we need to iterate through the stickies to display them, we re in trouble ： 


o o o o o o 

‘sticky_0” “sticky」” “sticky_2” “sticky_3” “sticky_4” “sticky_5” 




o 

“sticky_9” 



is how 七⑶ (y/c jus 七 added a s-tidky), so iterate z^ro 
"to 灼 me ， display'mj cadh s-tidky -Pirom “stidky 一 O’ "fco u s-tic.ky__^ w . 


i^^irpen your pencil 



UK o\\, *tKcVC S hO 
ov- 、、七 itlo / 一必 


Put a check next to the ways our current implementation could cause problems: 


Displaying stickies is inefficient if there are a lot of items in localStorage 
that aren’t stickies. 

A sticky could be overwritten by setltem if the size of the localStorage 
gets smaller when another app deletes its own items. 

It’s hard to quickly tell how many stickies there are; you have to iterate 
through every item in localStorage to get all the stickies. 


Use a cookie, it has to be easier than all this! 


you are here ► 
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storing arrays 



If only I could store an array in 
localStorage. We could use it to hold all 
the keys of the stickies and we could also always 
easily know the number of stickies were storing. 
But we all know localStorage stores only strings, 
so even though an array would be dreamy, 

I know ifs just a fantasy... 
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storing things locally 


We have the technology... 

We haven’t been lying, it is true that you can store only strings as the values of 
localStorage items, however that isn’t the whole truth because we can always convert an 
array (or an object) into a string before we store it. Sure, it seems like cheating, but it’s a 
totally legit way to store your non-String data types in localStorage. 


We know you’re dying to jump into the nitty-gritty of how to store arrays, but before we 
do, let’s first step through how an array would actually solve our (and Joel’s) problems. 


Let's rewind and say weve got six stickies in localStorage ： 


o o o o o o 

“sticky_0” “sticky」” “sticky_2” “sticky_3” “sticky_4” “sticky_5” 


Si 乂 stidkies, labeled -Pv-or»» ztyo b> -five, 
and weve got an array in localStorage named 、、 stickiesArray 〃： 




T\xt silkies a^d 
st»tk'»cs ar\ray a^rc 
s*tov*cd lotaIS*tov-ay- 


“sticky_0” 

“sticky」” 

“sticky_2” 

“sticky_3” 

“sticky_4” 

“sticky_5” 


“stickiesArray” 


Now \eYs add a new sticky. Let's call the sticky 、、 sticky—815”. Why such a crazy 
number? Because were not going to care what it is called anymore as long as it 
is unique. So, to add the sticky, we just add 、、 sticky_815〃to the array and then 
store an item for the sticky, just like we have been. Like this ： 


O L) o o c) o o 

“sticky_0” “sticky_1” “sticky_2” “sticky_3” “sticky_4” “sticky_5” “sticky_815” 


Eadh o( 

ihc s-tidkics airray is 
a key -to a s-tidky m 
lodalS-tovajc- 


e 士 a shcV>f m 
lotalS*bov-ay- 


s-t^kics ： theiv keys ^aiicy, ihey just ^ccd bo be uhque. 


“sticky_0” 

“sticky_1” “sticky_2” “sticky_3” 

“sticky_4” “sticky_5” 

“sticky_815” 


A^d wc ； vc extchded 
the stickies olv-Voiy 
by ohc Voilue- 


“stickiesArray” 


you are here ► 


439 



















rewriting stickies using an array 


Reworking our app to use m array 

Okay, we know roughly how we’re going to keep track of our stickies using an array, but let’s 
take this a little further and make sure we can iterate through and display all the stickies. In the 
current code we display all the stickies in the init function. Gan we rewrite that using an array? 
We’ll look at the existing code first, and then see how it changes (hopefully for the better) with an 
array. Don’t type in this code yet; we’re focusing on the changes we need to make for now and not 
making this code bulletproof. We’ll bring on the bulletproof stuff in just a bit. 


before... 

function init() { 

// button code here... 


tteve’s ouv old Code 七 ha 七 vclics oy\ 
七 he s-tidkics having spcdi-Pifi. 
s-tidky^O, stidkyj, ahd so oh.. 


for (var i = 0; i < localstorage.length; i++) 
var key = localstorage.key(i); 
if (key•substr(0, 6) == "sticky") { 

var value = localStorage.getItem(key); 


七 Wk »七. 


addstickyToDOM(value); 




As wc how khow, this might b\rcak bemuse we 
dcpchd Oh all stickies {p be thc\rc i-P wcVc 

bascd ° h ^ o-P the items m lo^lSWagc. 


New and improved 



|/\/cVc startmj by jrabb'mj i\\t 

stitkicsAv-v-ay ou-t o( lodalS-tovajc- 


function init() { 

// button code here... 
var stickiesArray = localStorage["stickiesArray n ]; 

if (! stickiesArray) { _ _ 一 ] Mt bo make suve is ar^ avray m lodalS-tov-ay. 

stickiesArray = 


[] 


vve neew yjj ^ / 

\sv^i 栎⑼ lets dvca-tc e 叶切 


localStorage . setltem ( n stickiesArray, stickiesArray); 

} WicVc ^cvc 

^^ avv-ay. 

for (var i = 0; i < stickiesArray.length; i++) { 
var key = stickiesArray[i]; 
var value = localStorage[key]; 
addstickyToDOM(value); 



个 

y/c add value -to 
i\^t DOM just like y/c lo 


tadii clcmcr\*t o-f {}\t av-vay 
is i\\t key o( a s-tidky, so 
v/cVc us'm^ bo vcVicvc 
do\r\rCspor\dim^ -fv"orw 

lodalSWa^c- 


h/OTB- you s-till do/ 七 
kr\ov/ how -to stove 
a 灼 d vcbiricvc airrays m 
lodalS-tov-ajc, so bresi 
七 his as pscudo-dodc 
u^til y/c show you. 

1/Vcll have h> make a 
addition 
this -to v/ov-k. 


vcv-y small 
-Poir -this 七 
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function init() { 


We still need to figure out how to actually store an array in localStorage. 

You might have already guessed that we can use JSON to create a string representation 
of an array and if so, you’re right. And once you have that you can store it in localStorage. 

Recall that there are only two methods in the JSON API: stringify and parse. Let’s put 
these methods to work by finishing the init function (check the solution at the end of the 
chapter before moving on): 


// button code here... 

var stickiesArray = localStorage[ n stickiesArray"]; 
if (!stickiesArray) { 
stickiesArray =[]; 

localStorage.setltem("stickiesArray", 

} else { 

stickiesArray = _ (stickiesArray); 

} 

for (var i = 0; i < stickiesArray.length; i++) { 

var key = stickiesArray[i]; 
var value = localStorage[key]; 
addstickyToDOM(value); 




(stickiesArray)); 


We added *bKis else dlausc because 
you’ll Y\ttd *to do some 七 if you 
avray -fv-om lotalS-tov-a^c 
(because \{!s a r^o*t av-vay)* 


Converting creatcSticky to use aw array 

We’ve almost got this app covered. All we need to do is to rework the createSticky method, 
which, as you’ll remember, just gets the text for the sticky from the form, stores it locally, and then 
displays it. Let’s look at the curent implementation before changing it: 


function createSticky() { 

var value = document.getElementByld("note text").value; , i, i in 

usi 吒从 C UalS*tovay 

var key = ” sticky_” + localStorage.length; ) __ "to dveate a key, ^\CM Wvc 

sttv\ dduse pvoblcms, v/cVc 50^5 *to 

bo 乙 a move ur\'i<\uc key. 


localStorage.setItem(key, value) 

- 


adds tickyToDOM(value) 


lAfeVc also gomg -to heed -to add the 
sticky -to ou\r sti^kics a\r\ray av\d save 
the a\r\ray ih lodoilS-tov-agc. 


you are here ► 
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adding a unique id 


What needs to change? 


iiereiare no o 

Dumb Questi 9 ns 


We have two things that need to change in createSticky. 
First, we need a new way to generate a key for each sticky that 
is unique. We also need to alter the code so that it stores the 
sticky in the stickiesArray in localStorage. 



We need to create a unique key for the sticky 


There are lots of ways to create unique keys. We could use the 
date and time, or create fancy random 64-bit numbers, or hook 
our app up to an atomic-clock API. Hmm, the date and time 
sounds like a nice, easy way to do this. JavaScript supports a 
date object that returns the number of milliseconds since 1970; 
that should be unique enough (unless you’re going to create 
your stickies at a really fast rate): 


_ Cvcatc a Date object, 七 he 灼 yt 

"the "tirwc m milliseconds. 


var 

var 

var 


currentDate = new Date(); 
time = currentDate.getTime(); 
key = n sticky_" + time; 


key by 


thch dveate -the 

-the nr\illisedo^ds -to 
the s-tv-'mg “st_dky— w . 



0u\r hC>/ 

CoAt b> 
dv-catc a 


unique key. 


❺ We need to store the new sticky in the array 

Now that we have a way to create a unique key, we need to 
store the text of the sticky with that key, and add the key to the 


Q/ What are milliseconds since 1970? 

You might already know a millisecond 
is a 1000th of a second, and the getTime 
method returns a count of milliseconds that 
have occurred since 1970. Why 1970? That 
behavior is inherited from the Unix operating 
system, which defined time that way. While 
it isn’t perfect (for instance, it represents 
times before 1970 with negative numbers), it 
does come in handy when you need a unique 
number or to track time in JavaScript code. 

Isn’t all this parsing and stringifying 
of JSON types rather inefficient? And if my 
array gets really large isn’t that also going 
to be inefficient to store? 

Theorectially yes on both counts. But 
for typical web page programming tasks it 
usually isn’t an issue. That said, if you’re 
implementing a serious application with very 
large storage requirements, you could see 
issues using JSON to convert items to and 
from strings. 


stickiesArray. Let’s work through how to do that, and then 
we’ll put all this code together. 

( - Lets -Piirs-t jvab -the s-tidkics av-vay. 

var stickiesArray = getStickiesArray (); 

localStorage.setltem(key , value); ^ - 

stickiesArray.push(key); - 


Ra-tV^cv 从 a 於 vcfcat all codt -to 
arsd cMttk stidkicsAv\ray> just like v/c did 

•m mit pvcvious pay), 

dvca*tc a v\t^i -fuir\d*tior\ *to do i*t- Wc II *to 
七 IVis m jus*t a set- 

l/Ve thch stove the key with i-ts vdlue like 
always did (only with ouv* new key). 


localStorage. setltem("stickiesArray", 

JSON.stringify(stickiesArray)); 

A^d s-tov-c 七 he av-vay badk m 」 

lofi.alS'tov-ajc, s-tvmgi-fy'mg i-t -Piirs-t. 


l/\fe use avvay wtiiod 
push 乩 appends i\\t key ov\{x> 
■bKc tv\A *bKc s-bitkics avvay- 
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Excellent, once Ive got this working 
I*m going to rework my shopping cart the same 
way and these two apps are going to be able to work 
from the same origin without any problems. 

I also love using an array; it makes everything much 
simpler to keep track of! 


Putting it all together 

It’s time to integrate all this new array-based code, including 
the init and createSticky functions. To do that we’re 
first going to abstract a small bit of code that’s needed in 
both functions — it’s the code that retrieves the stickies array 
from localStorage. You’ve seen it in init, and we need it 
again in createSticky. Let’s take that code and put it in a 
method called getStickiesArray —— it should look familar 
to you given the code we’ve already walked through: 



function getStickiesArray() { 


F'ivst •» 七加 

w st»tk'»csA^aV W of 
lotalS-bov-ay. 


>1 / 


var stickiesArray = localStorage.getItem("stickiesArray"); 

l-P this is -the -Piv-s-t v/e’ve 


if (!stickiesArray) { 


stickiesArray =[]; 


loaded this app, -theve mijlvt 
be a w s-tidkics/\\rvay W rte 眯 . 


i-f isr/t a 的 a\r\ray ye 七 v/e 

ertait av\ e 叶七 y avray, a^d 

short i*t ba 匕 k m lodalS-tov-a^c- 


} else { 


localStorage.setltem( n stickiesArray, JSON.stringify(stickiesArray)); 

^ Dojt /七 -Pov-yt "to s-tvmgi-py i-t -Piv-s-tf 


stickiesArray = JSON.parse (stickiesArray) jj^- 


O-thcv-y/isc, v/c -Pou^d -the av-vay \y\ 
lodalS-tovajc, dhd v/e heed "to pavsc it 
■to it {jo a JavaSdvip-t av-v-ay. 


return stickiesArray; 


I 的 cithev dasc, wc tv\d 

up v/i-th art avvay, a^d 
v/C du\rh it 


you are here ► 
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integrating all the code 


Putting it all together continued.. 


With getStickiesArray written, let’s look at the simplified, final versions 
of the init and createSticky functions. Go ahead and type these in: 

function init() { 

var button = document.getElementByld( n add_button n ) 
button.onclick = createSticky; 



Rcmcmbcv- wc also sc*t uf 
button events *m 
method- 


var stickiesArray = getStickiesArray(); 


for (var i = 0; i < stickiesArray.length; i++) 
var key = stickiesArray[i]; 


v/c jirab the av-v-ay y/i*th the 

stidkies’ keys m it 

J\Ioyi y/cVc *to 

stipes a^ay Ud 

•bV^c lotalS-tov-ajc rtemsf). 


E 把 h i-tcrw ih -the a\r\ray is a key -to a 
var value = localStorage[key] ; sticky. Lets yab ca^h ohC- 

f[Y\d yab i*b value 


addstickyToDOM(value); 

V 


/W add I 七 *to 七 k 
POM jus*t like v/c^vc 
bccr> do*m^. 


•(■yow' 


With init finished, we just have createSticky left: 


function createSticky() { 


IVe s*t3v**t by "tKc 

stickies a\rv-ay. 



T\\tv\ lets (xtdkt -tKa-t um<\uc key 
-(*ov* ouv* y\Cv/ s*ti£»kY* 


〆 ~ Wc add s-tidky key/value 

document.getElementByld( n note_text M ) .value; -to lodalS-fcov-ajc- 


var 

stickiesArray 

=getStickiesArray(); 

var 

currentDate = 

new Date () ; 

var 

key = '▼ sticky 

" + currentDate.getTime(); 


var value : 
localStorage•setltem(key, value); 
stickiesArray.push(key); 


h^A add "the r\t^ key b> the s-tidkics av-v-ay... 


localStorage.setltem( n stickiesArray", JSON.stringify(stickiesArray)); 
addStickyToDOM (value) ; Md v/c sVmji-fy ihc avray 

Br\d w\riic badk io lodalS-tovagc. 

Pmally, we update the pay with 

sticky by addihg the sticky 
io the D_. 
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Test Vrm\ 

Get all this code in and clear out your localStorage to make a 
nice clean start. Load this code, and you should see exactly the 
same behavior as last time. Joel, you’ll see your code working 
correctly now! 


thereiare no o 

Dumb Questi9ns 



Pick up dry 
cleaning 

Cancel 
cable tv. 

I I 

Buy another 
Apple 


who needs 

gadget 


it now? 

^ — 

— 




We’re using “sticky—’’ as the 
prefix for our localStorage item 
names. Is there a convention for 
localStorage naming schemes? 

There is no convention for 
naming localStorage items. If 
your web app is on a small site at 
a domain that you have control 
over, then naming shouldn’t be an 
issue since you'll be aware of all 
the names being used by all the 
different pages at the site. We think 
it’s probably a good idea to use a 
name that indicates the page or web 
app relying on that item. So “sticky—” 
helps us remember that those items 
are related to the Sticky Notes app. 

So if my sticky notes app is 
just one of many apps at a domain, 
I have to worry about potential 
conflicts right? 

Yes. In that case, it would be 
a good idea for you (or someone 
who manages the web sites at the 
domain) to put together a plan for 
how to name items. 


If I have a lot of stickies, my 
stickiesArray is going to get very 
long. Is that a problem? 

Unless you create thousands 
of stickies, it shouldn’t be (and if 
you do create thousands of stickies, 
we want to know how you are so 
productive!). JavaScript is pretty fast 
these days. 

So just to be clear, we can 
store any object in localStorage, 
just by stringifying it first with 
JSON? 

Right. JSON strings are 
simplified versions of JavaScript 
objects, and most simple JavaScript 
objects can be turned into a 
string using JSON and stored in 
localStorage. That includes arrays 
(as you’ve seen) as well as objects 
containing property names and 
values, as you’ll see shortly. 


Pick a naming sckeme 
lor your localStorage 


items tkat won’t 
conilict witk tkose oi 


otker applications at 
tke same domain. 


II you need to store 
arrays or objects 
in localStorage, use 

JSOV.stringfiiy to 

create tke value to 


store, and JSOV.parse 
alter you retrieve it. 


you are here ► 
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another feature request: delete 



It*s hard to manage my busy ^ 
life if I can’t get rid of these 
stickies after I*m done with them 
Can you add a delete function? 


De-clutter 
mv desk 


deleting sticky notes 


c-ful av-ouhd 
i\\c objects! 


She’s right, this app isn’t going to be very successful if we can’t remove 
stickies. We’ve already mentioned the localStorage . removeltem method 
in this chapter, but we haven’t really talked about it. The removeltem 
method takes the key of an item, and removes that item from localStorage: 


localStorage.removeltem(key); 


This rwethod \rci^ovcs 

"the itcrw 'm 

y/rth 七 he key. 


T 


V-CW'OVc|*tcW' OY\t 

pavaw\c*tcv * ： 
i-tcw' *to kc removed. 


That sounds easy enough, doesn’t it? Ah, but if you think about it, there is 
more to removing an sticky note than calling the removeltem method — we 
also need to deal with stickies Array... 
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storing things locally 


^harpen your pencil 


Let’s delete a sticky! 

Below you’ll see the contents of localStorage. You’ve got all the JavaScript 
you want along with the removeltem method. Using a pencil, sketch 
out what you need to do to remove sticky—1304220006342 from 
localStorage. After you’ve sketched it out, go ahead and write some 
pseudo-code below to show how you’re going to write your code. 


u O 

“sticky_1304294652202” “sticky_1304220006342” “sticky_1304221683892” 


o o o 

“sticky—1304221742310” “shopping “shopping 

cart item 1” cart item 2” 


“sticky_1304294652202” 

“sticky_1304220006342” 

“sticky_1304221742310” 

“sticky_1304221683892” 


“stickiesArray” 


Youv pseudo—todc 


you are here ► 
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exercise solution 


i^arpen your pencil 


Let’s delete a sticky! 

Below you’ll see the contents of localStorage. You’ve got all the JavaScript 
you want along with the removeltem method. Using a pencil, sketch 
out what you need to do to remove sticky—1304220006342 from 
localStorage. After you’ve sketched it out, go ahead and write some 
pseudo-code below to show how you’re going to write your code. Here’s 
our solution. 


1 屬—一 IW (、购 J 娜卿辦 A 

①女① O ① O 

“sticky 」 304294652202” K sticky >3042200^342 >, “sticky 」 304221683892” “sticky_1304221742310” “shopping “shopping 

/ cart item 1 ” cart item 2” 


“sticky 」 304294652202” 


“stick\^e^55^L06342” 


“sticky 1304221742310” “sticky 1304221683892” 


“stlSkiesArray” 


(I) Remove s*tidky key \tidky 」 30 午 iiOOOA 午 2 •” -from lodal£"to\r3^c 

usih^ lodal£*to\r3^c \rCmovc|*tcm mC'thod- 

(Z) 6{t{, ihc s*tidkies/\vray. 

(3) Remove v/i-th key 二 w s*tidky 」 30 午厶 3 午 2 •” -fvom -the s*tidkies/Way. 

( 午） lV\ri*bc s*tidkics/\\r\r3y bddk ih*to lod3l£*to\ra^c fs*t\rih^i-fyih^ i*t -fi\rs*t). 

⑸ Fmd w siidkv m ihc V0M avsd remove ii 
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The ddeteSticky fuwctiow 


You made a plan for how to delete the sticky notes, so let’s take a look at the 
deleteSticky function: 

pivst v/c vemove sticky UalS*tovay usm^ 

vcmovcl-tcm, pass'm^ m {\\t key of stidky -to delete- 

f WfcVc usm(X act£t.tkicsAv\raY 仏乂七咖 *to yt 

function deleteSticky (key) { 心 ^ st^kiesA^ay lodalS^ase- 

localStorage.removeItem(key); A 

Wfc make suv-c y/c have a sti^kics/iv-v-ay 

var stickiesArray = getStickiesArray () ; (j u st m tastl a^d 妞⑼ \itrait 

if (stickiesArray) { -thv-ou^h the av-\ray lookmj -Pov the key 

for (var i = 0; i < stickiesArray. length; i++) { wc delete* 

if (key == stickiesArray [i] > { ^_ 〆 W\)^ wc *Pmd 七 he v-ijhl key, wc dele 七 e 

stickiesArray.splice(i,1); 

} 

} 


ii -P\rom 七 he a\rray splide. 

^ f pli \ c 咖 0 ves ah avv-ay stav-tma at th 

lo^t ， o, give, by 扣 ” t (i), ‘ as _ 

elements as avc sp^i^ied the sc^d 扣 3 u_t 0) 


localstorage•setltem(’’stickiesArray” ， JSON.stringify(stickiesArray)); 


Finally, we save 七 he 
siidkicsAv*\ray (with -the key 
^removed) bade ■(» lo^alS-tov-ajc. 



0 


o 


I get the code, but I don’t see 
how were getting the key to pass to 
deleteSticky. Come to think of it, how 
is the user choosing the note to delete 
in the first place? 


you are here ► 
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selecting stickies with html and javascript 


How do you select a sticky to delete? 

We need a way for the user to select a sticky note to delete. We 
could get all fancy and add a little delete icon to each note, but 
for our Sticky Notes app, we’re going to do something much 
simpler: we’re going to just delete the sticky note if the user 
clicks on it. That may not be the best implementation in terms 
of usability, but it’s straightforward. 

To implement this, we first need to change the stickies so that 
we can detect when a sticky is clicked on, and then we’ll pass that 
along to the deleteSticky function. 

A lot of this needs to happen in the addStickyToDOM function, 
let’s see how: 


S«l# 




Cancel 
cable tv, 
who needs 
it now? 


Buy another 

Apple 

gadget 


v/e c\\cV oy\ d s-titky 
v\o{,t, i*t >will yt deleted- 


B13 fixture: v/cVc "to use "the key o*P the s*ti^ky whidh, , is 'stidky 一 + 

time, -to u^i<\uely idc^ti-py the Well pass m this key whenever wc ta\\ addS-tidkyToPO/^. 


function addStickyToDOM(key, value) { 

var stickies = document.getElementByld("stickies 
var sticky = document•createElement("li"); 
sticky.setAttribute( n id", key); 
var span = document. createElement ('▼ span"); 
span.setAttribute("class", "sticky"); 
span.innerHTML = stickyObj.value; 
sticky.appendChild(span); 


WcVc ddd'rn^ d ui^<\ue id *to <li> 

i\\ai vcfvcsc^*b i\\t s-t^ky 
m POM- WlcVc do— 七 Wis so 

dclc*bcS*t-idky W\W k 灼 y/WiA s*bid.ky 

you disked or\. Smtc already 
七 he s-tidky s key is u—ue，wVe just 
usm^ as »d- 


stickies.appendChild(sticky); 
sticky.onclick = deleteSticky; 



IVeVe also addihg did hdhdlev -to 
ewy slinky. W\\tv\ you d\c\c oh a 
stidky, dcIc-tcS-tidky will be billed. 



Your job now is to update all the code so that everywhere we’re calling addStickyToDOM, we’re 
passing in the key as well as the value. You should be able to easily find these places. But after 
you’ve finished , check the solution at the end of the chapter to make sure. 

Vo^i skip this, 
ov • 七 he 
test d\rivc 
wo\rk/ 


450 Chapter 9 























storing things locally 


How to get the sticky to delete from the evewt 

We’ve now got an event handler on each sticky note listening for clicks. When you 
click on a sticky, deleteSticky will be called and an event object will be passed into 
deleteSticky with information about the event, like which element was clicked on. 
We can look at the event. target to tell which sticky was clicked on. Let’s take a closer 
look at what happens when you click on a sticky note. 



l-f you t\\tV. ov\ yellow 

pavi o-f a stidky, 七 he 

is <l»> 
element- This is >wc 
because iiic <li> 

has 扣 idl 

key of iiic sticky r\oic. 


If 


I 十 you cut 


lidk oh 
iKc 

cveh-t tav-jet is 
<spair>> ihside 
tKc <li>, v/Ki^K is 
灼。七 wKa*t wc wah-fc. 



<li id= n sticky_1304270008375 n > 

<span class= n sticky n >Pick up dry cleaning</span> 

</li> 


一 This is the 
fiTAIL -Po\r the 
stidky hotc that 
v/C d\rcatc ih 

addStidkyToDOM. 

y/ay, y^evated by 

youv did yts passed rn-to del 士 S*Uky. 丁^ 心 ^七 IS — clcmc^i you disked i^ai y^traitA the eve 此 

ar>d v/c ca^ \A ihai element W pop 伙切 . 

function deleteSticky (e) { l*f *thc is <\\>) VC set 

var key = e. target. id; l-P "the tav-jrt is -the <spa^>, 

if (e. target. tagName . toLowerCase () == "span") { ") wc t\ttA "to jet the id o( 

key = e.target.parentNode.id; 

} 

localStorage•removeItem(key); 
var stickiesArray = getStickiesArray(); 
if (stickiesArray) { 

for (var i = 0; i < stickiesArray.length; i++) 
if (key == stickiesArray[i]) { 

stickiesArray.splice(i,1); 

} 


the pavwt clcrwc^t the <li>. 
The <li> is 七 he clcrwc^-t wrtli -the 
id 七 1 ^七 is the key >wc v\tcd- 

Noy/ use tiic key 

{p vemove i*tcrw -fvom 
lotalS-tova^c ； ar\d -fvom 
i\\t s-ti^k'icsAv-v-ay. 


locals torage • setltem ("stickiesArray" , JSON. stringify (stickiesArray)); 

removeStickyFromDOM(key) ; Wc also ,eed ,e.ove the <li> hold 叫 

the s-fci^ky the poigc, so it disappears 
whch you didk it. Wc\\ do tha-t hext... 


you are here ► 
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deleting stickies from the dom 


Pelcte the sticky from the POM, too 


To finish up the delete, we need to implement the remove St ickyFromDOM function. 
You updated the addStickyToDOM function earlier to add the key of the sticky as 
the id of the <li> element holding the sticky in the DOM, so we can use document. 
getElementByld to find the sticky in the DOM. We get the parent node of the 
sticky, and use the remove Chi Id method to delete the sticky: 


Pass m i\\t key (also i\\t id) 
stidky element y/eVe look'm^ -fov. 



function removestickyFromDOM (key) { 

var sticky = document.getElementByld(key); 

sticky.parentNode•removeChild(sticky); 

If } \ 

} <|i> <ul> \rCmovc the dhild Y\odt <li> 

^_ _ / 


Wlc ^vdb <li> 

-fvom DOM … 

… Sv\d v-cmovc it by -fivs-t 
gc-t-tihg i-ts pavch-t/Vodc ahd 
the" usihg vcmovcChild -fco 
v-emove i-fc. 


Okay, test it". 



Put of course wc can! 


Gome on, given your level of experience with this we’re going to be able to 
knock this out. How do we do it? Well, we’re going to create an object to store 
the text of the note and its color, and then we’re going to store that as the 
value of the sticky item, using JSON. stringif y to convert it to a string first. 


Get all that code in, load the page, add and delete some stickies. Quit 
your browser, load it again, and give it a real run through! 


Nice work! Now, can you give me 
a way to color code my stickies? 
You know yellow for urgent, blue 
for ideas, pink for backburner, 
that kind of thing? . 


Wc tav\ delete 

stickies r\ov/f 
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storing things locally 


Update the user interface so wg caw specify a color 


Right now，all our notes are yellow. Wouldn’t it be nicer if we could have a 
whole range of sticky note colors? 



IVc Co\a\A sdd 
d sclc&ticm 
up 

so you da 灼 

dhoosc 七 he 
dolov vou 
wa 灼七 -fov- you\r 
y\o{,c- 


« An 


Note to S«lf 


Color. 


I I + 0hup://localhosi/-Bcth/Hcad-Fir5i-HTML5/chap!cr9/notctosclf.hwnl 




yellow C 1 Text: 


^Add Sticky Note to Self') 


Pick up dry 

Cancel 

Buy another 

cleaning 

cable tv. 

Apple 


who needs 

gadget 


it now? 







This is y/dy 

doy\ l {, 
you 七 h’mk? 


Let’s tackle the easy part first: updating the HTML so we have a selection 
menu of colors to choose from. Edit your notetoself. html file and 
update your form to add the colors like this: 


<html> 


WleVc oy>ly 

(4 -Pov-m, i\)t rtsi siays 
*tKc same- 


<form> 

<label for= n note_color"X^olor : 
<select id= n note color M > ^ - 


hloiiu -the id of ihc <sdctt >； well 
need thai -to j\rab 七 he value o( 七 he 
selected option m -the JavaScript 


</label> 


l/Vell add a 
label -fov -the 
siidky so 
"the usev krtov/s 

whai 七 ha 七 


_ \A/cvc added W ^^7 

广 Golovs -to ^oosc W 


<option value="LightGoldenRodYellow n >yellow</option> 
<option value=" PaleGreen'▼ >green</option> 

<option value="LightPink">pink</option> 

<option value="LightBlue">blue</option> 


-field is -fov*. </select> 

<label for="note_text n >Text:</label> <input type= M text" id= n note—text'▼> 
<input type="button" id="add button" value= n Add Sticky Note to Self n > 


The value o( eadh 
opiio^ is 七 he v\a\^t o( 
3 ^olov* Y/C ddh jus*t 
plug \riah-t i^-fco 七 he 

s*tylc -rov ou\r s-tidkics. 


</form> 


/Ud "the d the *Por 


rw is -the same- 


</html> 


We’ve been using CSS to define the default color for the notes. Now we 
want to store a note’s color with the note itself. So, now the question is: 
how are we going to store the color for the sticky note in localStorage? 


you are here ► 
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using json to store color 


JSON.striwgify, ifs wot just for Arrays 

To store the color of the sticky with the text of the sticky, we can use the same 
technique we used for stickiesArray: we can store an object that contains the 
text and the color as the value for the sticky in localStorage. 



Color: pink Text: Cancel cable tv, who needs it now? 


Add Sticky Note to Self 



U 

/ key: \ 


"I **sticky _130439183684 (m 

« 

value: 

■ 

{■Value'^Cancel M 


V cable tv, who needs \\JJ 



now?”, ，， color”:”LightPJ|j^ 


1/VcVc bo take *tKc values iht usev- cr>*tcv-s 
-Pov- i\\t dolour and stidky Y\oic ar>d 
-them uf m*to a simflc objedt 



f[Y\d >wc1l 
stov-c 七 m 
lodalS*tov*ay 
v/i 七 h 七 he 
stidky s key. 



localStorage 


var stickyObj = { 

vW like s 七 idcies/Wray, well 严 "value" : "Cancel cable tv, who needs it now? 

have -to dall JSON.sVmji-fy ( "color” ： ” LightPink” 

ov\ -the s-tidky vdlue bc-Povc } ; 


v/c dall lodalS-fcov-a^c sctl-tc 
"to save -the value- 




Let’s rewrite the createSticky function to store the color with the sticky note text. To 
represent the text and the color, we’ll use our handy object: 

function createSticky() { 

var stickiesArray = getStickiesArray(); 
var currentDate = new Date(); 

var colorSelectObj = document.getElementById( n note—color ”） 
var index = colorSelectObj.selectedlndex; 
var color = colorSelectObj[index].value; 
var key = n sticky_" + currentDate.getTime(); 
var value = document.getElementById(''note—text") .value; 
var stickyObj = { 


'value' 

'color' 


value 

color 


l/Ve do 七 he usual *to 
yab 七 he value o( 七 he 
sclcd*tcd dolov option. 

use c.o\or {p 

trtait sk\t\^0\>y ^ o\)^ct 
七 h 七 toy\*ta'ms b*JO 
仏 c it%i -bV^c sUk》and 

七 V^c d-olov- *bV\c usev sclct-tcd- 


Ay\d, v/c JSO/V.s-tv-mgi-Py 
"the s-tidkyObj bc-fo\rc wc 

i*t m lodalS-fcov-agc. 


localStorage•setltem(key, JSON.stringify(stickyObj)); 
stickiesArray.push(key); 
localStorage. setltem (’ 'stickiesArray, JSON. stringify (stickiesArray)); 
addStickyToDOM(key, stickyObj) ; / Now, wcVc passmj Ihc object msicad o( a 


■to addS 七 idkyliD 鱗 WW\cM you” I y\ttd "fco upd^C 

3dd£tidky7oD0A1 ijoo, vijh-t? 
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storing things locally 


Using the new stickyObj 


Now that we’re passing stickyObj to addStickyToDOM, we need to update the 
function to use the object instead of the string we were passing in before, and to set 
the background color of the sticky. It’s a fairly easy change though; let’s take a look: 




function addstickyToDOM(key, stickyObj) { 

var stickies = document.getElementByld( M stickies M ) 
var sticky = document•createElement( n li n ); 
sticky.setAttribute( n id n , key); 


Wc bo 七 i 化 pa\ramc*tcv 

hcv-c io be i\\t stidkyObj ratiicv* 
{hav\ the value o-f -the stidky. 


ttTAIL elerwcivt 

obje^-ts have a 

siylc p\ropc\rty 
you 匕 a 灼 use 

■fco addess -the 
s-tyle o( -tha-t 
clcrwc>vt. 




sticky.style.backgroundColor = stickyObj.color; 

k _ 

var span = document.createElement( n span"); 
span.setAttribute("class", "sticky"); 
span.innerHTML = stickyObj.value; 
sticky.appendChiId(span); 
stickies.appendChiId(sticky); 
sticky.onclick = deletesticky; 




\Mt yt dolov -fvom stidkyObj 
wcVc passm^ *m*to addSti^kyloPOM - 

Notice wc sc*t 七 he 

badkgv-ou^d dolov- p\ropcv-ty 
•m JavaSdv-ipt, wc spedi-fy 
i"t as batkj\rouir>dColo\r, MOT 
batkjvou^d—dolov, like \y\ CSS. 

A^d {})cy\ v/c v\tcd -to gei the 
七以七 value v/cVc -to use m 
七 he s-tidky v\oic Wo^ 七 he object 


There is one other place we need to update the code, and that is in init ， where 
we are getting the stickies from localStorage and passing to adds tickyToDOM 
when we first load the page. 


function init() { 

var button = document.getElementByld("add_button M ); 
button.onclick = createSticky; 


var stickiesAray = getStickiesArray(); 


for (var i = 0; i < stickiesArray.length; i++) 
var key = stickiesArray[i]; 



|s(oy/ y 七七 he valuc 

st.tk7 r^oit 

lotalS-bovay, ^ 於 cd *to , 

JSOK parsc rb, because \U 
okjett r^oi a skx\^ a^mo^rc. 


var value = JSON.parse(localStorage[key]); 


addstickyToDOM(key, value); 



wc pass -that object -to 

3ddS-ti£.ky7oD0A1 instead of -the 

sbriM (-the Code looks 七 he s 9 mc, bu-t 

七 he ihmj wcVc passing is di-f-Pcv-c^i). 


you are here ► 
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testing color stickies 


Test drive sticky wote colors 


Before running the Note to Self app again, you’ll need to clear out your localStorage 
first because the previous version of our stickies didn’t have any color stored in them, 
and now we’re using a different format for our sticky values. Before we were using 
strings, now we’re using objects. So empty out your localStorage, reload the page, and 
add some stickies, selecting a different color for each one. Here are our stickies (and 
we’ll also check out localStorage too): 


You da 灼 use youv 
rna*m*tcir>air>dc.v>*tml -flic *to 
tlcav ou 七 youv lotalS-tova^c, 
ov use do 灼 sole. 


iVe picked yellow, fmk ； av\d blue (or ouv* 
siidky v\oics wc added 七 hem. 



Note to Self 



1 ◄ 

► L+ 

0 http://local host/~Beth/Head-First-HTML5/chapter9/notetoself.html 

C Google 

1 



Colon [ yellow t ] Text： 〔Add Sticky Note to Self) 


Pick up dry 

Cancel 

Buy another 

cleaning 

cable tv, 

Apple 


who needs 

gadget 


it now 

i —- 



O Elements 1 | Resources Network ^ Scripts Timeline Profiles Audits Console Q Search 


▼ CD Frames 
▼ CD (notetoself4.html) 

► Scripts 

► Stylesheets 

J notetoself4.html 
► I J Databases 
▼画 Local Storage 


local host 


Session Storage 
Cookies 

►匿 Application Cache 


lP >三 


Key 

Value 

sticky_1312150404612 

{Value •:* Buy another Apple gadger/cotofLightBlue] 

sticky.1312150374242 

rvalue*:*Pick up dry deaning M , l> color v : a, LightColdenRodYelloW} 

stickiesArray 

rsticky_1312150374242Vsticky_1312150386414Vsticky_13121504046121 

sticky.1312150386414 

{•value •: ’Cancel cable tv, who needs it now'-colorVLightPinlO 

\ 

c x \ 




Bsch s-tidky noie’s value is now a (J£0hl 

object -the value 

o( the s-tidky av\d 七 he toW o( 七 he siidky. 
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storing things locally 


I was thinking, if we can store 
objects and arrays, why don’t we just 
store all the notes in the array itself, 
why do we need all these other items? 
It seems to make it all complicated when 
it could just be embedded in one item in 

localStorage. 


For some uses，that makes a lot of sense. 

Knowing what we know now, we certainly could design the 
stickies so that they were objects embedded in an array. And 
going forward you might decide to do just that. It might also 
make sense for your shopping cart. The only downside is that 
the JSON. stringify and JSON.parse methods have to do a 
lot more work anytime you make a change, for instance to add 
a note we have to parse the entire set of notes, add the note, 
and then stringify all the notes again before writing them back 
in to the store. But, for the amount of data in Stickies, that 
shouldn’t be a problem in general (although do think about 
mobile devices with limited GPUs and the effect of the GPU 
usage on battery life). 



So whether you want to pack everything into one object or 
array in localStorage, really depends on how many data items 
you need to store, how big each one is, and what type of 
processing you’re going to do on them. 

While our implementation here may be a bit of overkill for 
a limited number of Stickies, we hope you agree it gave us a 
great way to think about the localStorage API and how to deal 
with items in it. 


you are here ► 
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TRY THIS AT 11 ( 臓 

(OR BLOWING UP YOUR 5 MKGABYTKS) 


We’ve told you that you have five whole megabytes of storage on every 
user’s browser, but while five megabytes sounds like a lot, remember that 
all your data is stored in the form of a string rather than in a byte-efficient 
data format. Take a long number, say, the national debt — when expressed in 
floating point form it takes up very little storage, but when expressed in the 
form of a string, it takes up many times that amount of memory. So, given 
that, the five megabytes might not hold as much as you think. 


So what happens when you use all 5MBs? Well, unfortunately this is one 
of those behaviors that isn’t well defined by the HTML5 specification, 
and browsers may do different things when you exceed your limit — the 
browser may ask if you want to allow more storage, or it may throw a 
QUOTA—EXCEEDED ERR exception, which you can catch like this: 


c 从 c— s 铣〜 
arc tWow 


Tiiis is ov\t JavaScript 
dv^ea v/e 




a sc*tl*tcm tall m the 
middle o-P the *tv-y blodk ； 

try { y i-p ^ocs v/\ror>^ 3r\d 

localstorage.setltemdnyKey, myValue) ; 七一 

} catch (e) { 七 ^ blo^k will be mvoked- 

if (e == QUOTA 一 EXCEEDED— ERR) { 

alert ("Out of storage! '▼) ; 

} ) 

> WcVc *to see i-P -this is a siova^C <\uo*b cv\ror (as offosed -to 

some o-thev- *tyfC C%dCf*tio^). l-f so, wc alcv-*t 七 he usev-. You II mos 七 

likely *to do move 朽 jus*t by\ alcv-*t- 


tovcv-cd) you 州吵七 
y/dwt "to add Vt 
your list of 七 iVi 呼 * to 
look m*to- 

l^oi all bv-owsev-s avc duv-v-c^*tly -thv-ow'mj 

ihc £)<CE£PEP — ERR 

Bui -they still tWow a 

you totted youv* so you may v/3^*t *to 

handle the ^c^cv-al dasc ok by\ c%dcf*tio^ 

odduv-m^ you srt a 的 
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We don’t see any reason not to push your browser to the limit, see what it’s made 
of, see how far it can go, see what its behavior is under pressure. Let's write a little 
code to push your browser over its storage limit: 


storing things locally 



<html> 

<head> 

<script> 


DANGER 

Explosive 

Exercise 




localstorage• setltem( n fuse，▼, 
while(true) { 

var fuse = localStorage.getltem (’ ▼fuse ”）； 
try { 

locals torage • setltem( n fuse, fuse + fuse); 

} catch(e) { 

alert("Your browser blew up at" + fuse.length + 
break; 


Let s*t3V*t 3 

sbr\v\^ y/itii key w *fuse”. 

f[Y\d jus*t keep 
mdv-cas'mj i*b siz^.. 

… by doubl'mj -the siv-'mj (by 

i-t v/i-th itself). 

TV^WC’11 七巧 七 c |七 

batk *bo lotalS-tov-ay. 




n 


with exception : 


u 


+ e ： 


/W lets Y\oi leave a 

mess, SO remove 

-from lotalS-tov-ay. 


If : 1 七 blows up, Y/eVc dohe/ 
I^Vc II slc\ri ihc usc\r av\d gc-t 
ou "t o-f this loop. 


localStorage•removeItem("fuse"); 
</script> 

</head> 

<body> 

</body> 

</html> 


Go ahead and type this in, light the fuse by loading it, and have 

fun! Try this on a few different browsers. r 

I 士 you have 

the r>cv*vc 

. *to vur> this, 

fu 七 youv 
vcsul*ts \\tvt- 



Watch it! 


Use at your 
own risk! 


Seriously, this 
code could 
crash your browser, which 
might lead to your operating 
system being unhappy, which 
could lead to you losing work. 
Use at your own risk!!! 
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info about session storage 



Ive been beta testing my shopping 
cart app and users don’t want their 
shopping cart sticking around in the browser. 
How can I remove all the shopping cart 
items when the user closes the browser? 

Did I choose the wrong technology? 


No Luke，there is another Skywalker. 

It turns out that localStorage has a sister, named 
sessionStorage. If you substitute the global variable 
sessionStorage everywhere you’ve used 
localStorage then your items are stored only during 
the browser session. So, as soon as that session is over 
(in other words, the user closes the browser window), 
the items in storage are removed. 

The sessionStorage object supports exactly the 
same API as localStorage, so you already know 
everything about it you need to. 

Give it a try! 


460 


Chapter 9 


storing things locally 


♦ 




♦ 








At this point you’ve been through the localStorage API. Below you'll find all the main characters 
of the API sitting with their masks on. See if you can determine who does what. We’ve gone 
ahead and done one for you to get you started. 



Use me to store items for the long term. 




I take keys and values and write them into the localStorage. 
Now keep in mind if there’s an item with that key already in 
the localStorage, I’m not going to warn you, I’m just going to 
overwrite it so you better know what you’re asking for. 


% 


If you overstay your welcome in localStorage and use too much 
space you’ll get an exception and you’ll be hearing from me. 


辦 I ㈣ 

rem^velfem 



Need to knock off an item? I’ll get the job done discreetly. 

Just give me a key and I’ll go out and find the item with that key 
and hand its value to you. 



I’m a short term kinda guy, I’ll store your stuff just as long as 
you have the browser open. Close your browser, and poof, all 
your stuff is gone. 




When you’ve had it with all the items in your localStorage, I 
clean up all those items and throw them away, leaving you with 
a nice fresh and empty localStorage (keep in mind I can only 
clean up my own origin). 


1 喊妙 


Need to know how many items are in your localStorage? That’s me. 


_ 您靡 EDED—E 肌 


Give me an index, and I’ll give you a key from that index in 
localStorage. 
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ways to use web storage 


Now that you know localStorage. 
how are you goiwg to use it? 

There are many ways to make use of localStorage — the Stickies app used 
them so we didn’t need a server, but even with a server, localStorage can 
be quite helpful. Here’s a few other ways developers are using them: 




I*m going to store playlists with 
metadata for my users. They'll 
be able to store their favorite 
clips along with the timecode 
where they left off viewing. 


rm using sessionStorage 
for my new ecommerce librarys 
shopping cart. If the user closes 
the browser, I want the shopping 
cart to go away. 


In my new Twitter client, I'm going to 
cache Twitter search results for efficiency 
with localStorage. When my users search, 

0 ^ l I’m going to check the local results first. That 

could really help my mobile users. 
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IVe got a really 
cool game that works in two 
different browser windows, 
and Tm using localStorage to 
synchronize state. 



I*m storing lots of local 
data to make my clients* 
apps fast on their mobile 
devices. Having a large store 
on the client side is a huge 
win for me. 



This gives me a new way to store user state. 

I used to need some kind of server-side based 
session and backend storage. Now I can just 
store my users* state locally, and bring in the 
server-side code only when I have to. 
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review of web storage 


BULLET POINTS - 

■ Web Storage is a store in your browser and an 
API you can use to save and retrieve items from 
the store. 

■ Most browsers provide at least 5 megabytes of 
storage per origin. 

■ Web Storage consists of local storage and 
session storage. 

■ Local storage is persistent, even if you close 
your browser window or quit the browser. 

■ Items in session storage are removed when you 
close your browser window or quit the browser. 
Session storage is good for temporary items, 
not longer term storage. 

■ Both local storage and session storage use 
exactly the same API. 

■ Web Storage is organized by origin (think 
domain). An origin is the location of the 
document on the Web (e.g., wickedlysmart.com 
or headfirstlabs.com). 

■ Each domain has a separate storage, so items 
stored in one origin are not visible to web pages 
in another origin. 

■ Use localStorage.setltem(key) to add a value to 
the store. 

■ Use localStorage.getltem(key) to retrieve a 
value from the store. 

■ You can use the same syntax as associative 
arrays to set and retrieve items to and from the 
store. Use localStorage[key] to do this. 

■ Use the localStorage.key() method to 
enumerate the keys in localStorage. 

■ localStorage」ength is the number of items in 
localStorage at a given origin. 

■ Use the console in your browser to see and 
delete items in localStorage. 


You can delete items directly from localStorage 
by right-clicking on an item and choosing delete 
(note: may not work in all browsers). 

You can delete items from localStorage in code 
using the removeltem(key) method and the clear 
method. Note that the clear method deletes 
everything in localStorage at the origin where 
you do the clear. 

The keys for each localStorage item must be 
unique. If you use the same key as an existing 
item, you'll overwrite the value of that item. 

One way to generate a unique key is to use the 
current time in milliseconds since 1970, using 
the Date object’s getTime() method. 

It is important to create a naming scheme for 
your web app that will still work if items are 
removed from the store, or if another app 
creates items in the store. 

Web Storage currently supports storing strings 
as values for keys. 

You can convert numbers stored in localStorage 
as strings back to numbers using parselnt or 
parseFloat. 

If you need to store more complex data, you 
can use JavaScript objects and convert them 
to strings before storing using JSON.stringify, 
and back to objects after retrieving using JSON. 
parse. 

Local storage may be particularly useful 
on mobile devices to reduce bandwidth 
requirements. 

Session storage is just like local storage, except 
that what’s saved in the browser’s store doesn’t 
persist if you close the tab, the window, or exit 
the browser. Session storage is useful for short 
term storage, such as for a shopping session. 
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storing things locally 




Across 

3. When we used the_of localStorage to create 

key names, we ran into a problem: gaps in the names of 
our sticky notes. 

4. Luke Skywalker’s sister. 

7. We have to_an object before we store it in 

localStorage. 

8. Most browsers offer_megabytes of storage per 

origin. 

9. We can detect which sticky note the user clicks on by 

looking at the event_. 

10. We store an item in localStorage with this method. 

11. localStorage can store only_. 

12. We thought it would be just a fantasy to store an_ 

in localStorage but it turns out you can, with JSON. 

13. Use a try/_to detect quota-exceeded errors in 

localStorage. 


Down 

1. We used the_to hold the keys of all our 

stickies so we could easily find them in localStorage. 

2. sessionStorage is just like localStorage except its not 
_if you close your browser window. 

5. We create an_to store the sticky note text and its 

color in one localStorage item. 

6. Use_to convert a string to an integer. 

7. Cookie has a_issue. 

8. If you store something in your browser and fly to 
_, it will still be there when you come back. 
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exercise solutions 


The Shell Game Solution 


Ready to try your luck? Or should we say skill? We’ve got a game for you 
to test your command of localStorage, but you'll need to be on your toes. 
Use your knowledge of getting and setting key/value pairs in localStore to 
keep track of the pea as it shifts from shell to shell. Here’s our solution. 

function shellGame() { 

localStorage. setltem( n shelll，▼, "pea"); 
localstorage.setltem( n shell2 n , "empty"); 
localStorage.setltem("shell3", "empty"); 
localStorage["shelll"] = "empty"; 
localStorage["shell2"] = "pea"; 
localStorage[ n shell3 n ] = "empty"; 
var value = localStorage.getltem( n shell2 n ); 
localStorage • setltem( n shelll，▼, value); 
value = localStorage.getltem("shell3"); 
localStorage["shell2"] = value; 
var key = M shell2 M ; 



shell had the pea? 


localStorage[key] 
key = "shelll"; 
localStorage[key] 
key = n shell3"; 
localStorage[key] 


’pea’ 


empty' 


empty' 




Value 

shelll 


shclIZ 

pea 

shelB 

empty 


The pea is uhdc\r shcllZ. 


for (var i = 0; i < localStorage.length; i++) 
var key = localStorage.key(i); 
var value = localStorage.getItem(key); 
alert (key + ’'▼ + value); 



Your job was to update all the code so that everywhere we’re calling 
addStickyToDOM, we’re passing in the key as well as the value. 

You should have updated all the calls to addStickyToDom in init and 
createSticky, to look like this: 

addStickyToDOM(key, value); 
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%|harpen your pencil 

Solution 


Put a check next to the ways our current implementation could cause problems: 


Displaying stickies is inefficient if there are a lot of items in localStorage 
that aren’t stickies. 



A sticky could be overwritten by setltem if the size of the localStorage 
gets smaller when another app deletes its own items. 

It’s hard to quickly tell how many stickies there are; you have to iterate 
through every item in localStorage to get all the stickies. 

Use a cookie, it has to be easier than all this! 



We still need to figure out how to actually store an array in localStorage 

You might have already guessed that we can use JSON to create a string representation 
of an array and if so, you’re right. And once you have that you can store it in localStorage. 


Recall that there are only two methods in the JSON API, stringify and parse. Let’s put 
those methods to work by finishing the init function: 


is^-t ar^ arv-ay m UalSUay, ^ 

飨 ab the avvay lodalS-toirajc- avray ad assi 沪 it *to 七 ^ variable s 七 i 匕 kies/^ray. 

function init() { 、 A*t *tKis po'mt variable stitkicsAvvay is d 

l-f v/c had -fco d\rca*tc a 
y\cvj avvay, wc use JSON- 

var stickiesArray = localStorage [" stickiesArray" ] ; 3 

if (! stickiesArray) { - 〆 ./ representation i\\c av-iray, 


// button code here... 


stickiesArray =[]; 



and v/c s*bo\rc it- 


localStorage. setltem ("stickiesArray" , JSON. stringify (stickiesArray)); 


else { 

stickiesArray = JSON.parse(stickiesArray) 



l-P i\\t stidkics av-v-ay is already stored 
•m lodalS-tova^c (as a v/c 

r\ttA *to fav-sc *i*t us*m^ JSON- /Vf 七饮 
七 his v/cll have ^ a^ay keys 
ass\^tA b> -the stidkicsA^ay variable. 


for (var i = 0; i < stickiesArray.length; i++) { 
var key = stickiesArray[i]; 

var value = localStorage[key]; \ i ,, , , . 

Just to be tkaY, wc \rc iak'^a the sbr^a Poih-tcd -to 
addStickyToDOM(value) ; by 3, 針 a/ 如 d 七 ^ 

} ass 咖叫 a\r\ray ba^k io the st.^kicsAv-v-ay viable. 
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TRY THIS AT HOME 

(OR BLOWING UP YOUR 5 MEGABYTES) 


We’ve told you that you have five whole megabytes of storage on every 
user’s browser, but while five megabytes sounds like a lot, remember that 
all your data is stored in the form of a string rather than in a byte-efficient 
data format. Take a long number, say, the national debt — when expressed in 
floating point form it takes up very little storage, but when expressed in the 
form of a string, it takes up many times that amount of memory. So, given 
that, the five megabytes might not hold as much as you think. 

So what happens when you use all 5MBs? Well, unfortunately this is one 
of those behaviors that isn’t well defined by the HTML5 specification, 
and browsers may do different things when you exceed your limit — the 
browser may ask if you want to allow more storage, or it may throw a 
QUOTA exceeded—ERR exception, which you can catch like this: 


广 


arc 咖。 _ 

从 c Vf Wotk. 


try { 

localStorage•setItem(myKey, myValue) 
} catch(e) { 

if (e == QUOTA 一 EXCEEDED— ERR) { 
alert("Out of storage!") 


Hcv-c^s a tall m 

middle o-P the *tv*y blodk; 

i-p 

SC*tl*tcm •thvows By\ 

*thc blodk will be invoked- 


J 


l^cVc -testmg *to see this is a siorajc <\uota c\rvov- (as offosed -to 
some 0 *thcv *tyfc o( C%dcp*tioir>). l-f SO, WC alcv-t the USCV-. You’ll rnoS*t 
likely *to do mov-c just a 的 alcv-*t- 


all bv-ov/sev-s arc du\rv-c^*tly -thv-ow'mj 

iht 6^U0TA_B)(CBBVBV_BRR 

But -they S*till *thvov/ a C%dCf*tio^ v/hcr> 
you youv so you r«ay xo 

handle -the ^c^cv-al dasc o+ by \ 

oddu\r'mg ^i\\Cy\ you srt a 的 
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We don’t see any reason not to push your browser to the limit, see what it’s made 
of, see how far it can go, see what its behavior is under pressure. Let's write a little 
code to push your browser over its storage limit: 


<html> 

<head> 

<script> 



Let s*b3V*t 3 

sbr\v\^ y/itii key 吖 use”. 

f[Y\d jus*t keef 
mdv-cas'mj i*b siz^c. 



localstorage• setltem( n fuse，▼, 
while(true) { 

var fuse = localStorage.getltem (’ ▼fuse ”）； 
try { 

locals torage • setltem( n fuse, fuse + fuse); 

} catch(e) { 

alert("Your browser blew up at" + fuse.length + 
break : 



… by doubling the siv-'mg (by 

i-t y/rth itscl-P). 

y/c II br^l *to irtc »七 
katk bo loc.alS*tov-a^c. 


n 


/W lets Y\oi leave a 

mess, SO remove 

-from lotalS-tov-ay. 


with exception : " + e); 

$) 七 blows up, wcVc dohe/ 

II alcvt -the usev ahd get 

out or this loop. 


localStorage•removeItem("fuse"); 
</script> 

</head> 

<body> 

</body> 

</html> 


Go ahead and type this in, light the fuse by loading it, and have 
fun! Try this on a few different browsers. 




Ouv \rcsul*b 

-Prom Sa-Pavi 

a 灼 d Chv-omc- 


0 


http://(ocalho&t 


® 


The page at localhost says: 

Your browser blew up at 2097152 with exception: 
Error: QUOTA_EXCEEDED_ERR: DOM Exception 22 


OK 


j 


OK~ 
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exercise solutions 


♦ 




lT 


O 办轚 




UTU 

all the main 




At this point you’ve been through the localStorage API. Below you'll find all the main characters of 
the API sitting with their masks on. See if you can determine who does what. Here’s our solution. 


cje® 







temQVeJfem 




1 喊槪级妙 


QU 叫靡 EDED—E 肌 


Use me to store items for the long term. 

I take keys and values and write them into the localStorage. 
Now keep in mind if there’s an item with that key already in 
the localStorage, I’m not going to warn you, I’m just going to 
overwrite it so you better know what you’re asking for. 

If you overstay your welcome in localStorage and use too much 
space you’ll get an exception and you’ll be hearing from me. 

Need to knock off an item? I’ll get the job done discreetly. 


Just give me a key and I’ll go out and find the item with that key 
and hand its value to you. 


I’m a short term kinda guy, I’ll store your stuff just as long as 
you have the browser open. Close your browser and, poof, all 
your stuff is gone. 


When you’ve had it with all the items in your localStorage, I 
clean up all those items and throw them away, leaving you with 
a nice fresh and empty localStorage (keep in mind I can only 
clean up my own origin). 


Need to know how many items are in your localStorage? 
That’s me. 


Give me an index, and I’ll give you a key from that index in 
localStorage. 


470 Chapter 9 













storing things locally 



HTML5cross Solution 
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10 piitdng javascript t9 work 肴 

f Web Workers ♦ 


Okay I can t do 
EVERYTHING around 
here, this is going to 
require a little help. 


How about 
some help into the 
elevator shaft? 


Slow script — do you want to continue running it? 

If you’ve spent enough time with JavaScript or browsing the Web you’ve 
probably seen the “slow script” message. And, with all those multicore 
processors sitting in your new machine how could a script be running too 
slow? It's because JavaScript can only do one thing at a time. But, with 
HTML5 and Web Workers, all that changes. You’ve now got the ability to 
spawn your own JavaScript workers to get more work done. Whether you’re 
just trying to design a more responsive app, or you just want to max out 
your machine’s CPU, Web Workers are here to help. Put your JavaScript 
manager’s hat on, let’s get some workers cracking! 


this is a new chapter 
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javascript threads 


The Preaded Slow Script 


One of the great things about JavaScript is it does only one 
thing at a time. It’s what we like to call “single-threaded.” Why’s 
that great? Because it makes programming straightforward. 
When you have lots of threads of execution happening at the 
same time, writing a program that works correctly can become 
quite a challenge. 

The downside of being single-threaded is that if you 
give a JavaScript program too much to do, it can get 
overwhelmed, and we end up with “slow script” dialogs. The 
other ramification of having only one thread is if you have 
JavaScript code that is working really hard, it doesn’t leave 
a lot of computational power for your user interface or your 
user’s interactions, and your application can appear to be 
sluggish, or unresponsive. 



How JavaScript spends its time 


Let’s see what this all means by taking a look at how JavaScript 
handles the tasks of a typical page: 



This is >wha*t 
>wc mC3ir> by 
s*m^lc-*bKv-cadcd- 
JavaSdvift 

s*tcps *thvou^V> 

Kas *to do, ov\t 

七 伙 七 k 

o*tKcv-. Ti^cv-c^s y\o 
f>av~allel c%cdu*tiov> 
V>cv*c- 


JavaScript 

Thread 



There’s only one of 
me, but look at everything 
I get done by just handling all 
of this one thing at a time. 


Fov d lo*t o( >wcb apfs 
*tKis y/ovks vcally >wcll- 
Evcvythmg Aoy\c ar>d 
usev- m*tcv-fadc seems 
-fast ar>d responsive. 
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Whew single-threaded goes 

It’s true, for a lot of uses, this single-threaded mode of computing by JavaScript works great, 
and as we’ve said, it makes programming straightforward. But, when you’ve written code 
that is so “computationally intensive” it starts to impact JavaScript^ ability to get everything 
done, the single-threaded model starts to break down. 


£vcvy*th*m^ v/ovks 
uy>*til 3 b'rt 
of JavaSdvift 
Code s*tav*b 

v*c«yAiv*m^ d lo 七 of 
pvodcssm^ 七 ime, 
*t 3 kcs dv/dy 
-fvom JavaSdv*ip*t s 
job o( m 七 ev*ad 七 ” 
七 he usev* m 
•the usev- *m*tcv-fadc. 


r c 


JavaScript 
Thread 

4 Running an init function 

—^ _ 




Handling another user click 


^Updating 


the DOM 
Fetching form data 






oO 


o 


Validating user input 


O 


y^ikcs, fv-odcssm^ a avv-ay 

•is a lo*t o-f 


Who’s hogging all 
the processing time? 


Whafs going on up there? 
Things aren’t getting done! 


Users are bailing! The 
UI isn’t being updated! 



We give up, throw in the towel, 
bring up the slow script dialog. 


you are here ► 
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Adding another thread of control to help 

Before HTML5, we were stuck with one thread of control in our pages and apps, 
but with Web Workers we’ve now got a way to create another thread of control to 
help out. So, if you’ve got code that takes a long time to compute, you can create 
a Web Worker that will handle that task while the main JavaScript thread of 
control is making sure everything is good with the browser and the user. 


This 七 imC 
keeps 

smoo*tKly, 七 he 
Wleb iVovkcv- 
is -tak'mj 
dav-c o-f 

domfu*tcl*tioy>... 


JavaScript 

Thread 


Rathcv- i\\ay\ slov/m^ iW\y\^s Ao\ny\ W\i\\ 
ouV dompu*tc—nr>*tcr>sivc JdvaSdVipt 
>wc 6 釙 msiedd d 1/Vcb Worktr, 

vu 内 s m a sepav-ate thv-cad, air>d 
have \i do all *tV>c i^avd >wo\rk. 


Web Worker 



A^d when rt’s dov\c, 七 he wovkcv 
匕如 cvch send us 七 he data i-t^s be ⑶ 
wov~km^ ov\ v/C CdiYi i^doV'pov^^'tc 
七 ha 七 m ou\r app. 


Now, we’ve made a big deal out of the fact that one thread of control keeps things 
simple and easy to program, and that is true. But, as you’re going to see, Web 
Workers have been carefully crafted to make sure things stay simple, easy and safe 
for the programmer. We’ll see how in just a moment... 
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JavaScript B;^p©seJ (AgaWO 

This week’s interview: 

Where JavaScript spends his time. 


Head First： Welcome back JavaScript, great to have you. 

JavaScript： Glad to be here, as long as we stick to my schedule, lots to do. 


Head First： That is actually where I thought we might focus our time today. You’re a super 
successful guy, you have so much going on — how do you get it all done? 

JavaScript： Well, I have a philosophy: I do one thing at a time, and I do it really well. 

Head First： How do you do only one thing at a time? To us it looks like you’re retrieving 
data, displaying pages, interacting with the user, managing timers and alerts, and on and on... 

JavaScript： Yes, I do all that, but whatever I’m doing, I do only that. So if I’m dealing with 
the user, that’s all I do until I’m done with that. 


Head First： How can that be true? What if a timer goes off, or network data arrives, or 
whatever, don’t you stop and do that? 

JavaScript： When an event occurs, like the ones you’ve mentioned, that event is added to 
a queue. I don’t even look at it until I’ve finished whatever I’m working on. That way I do 
everything correctly and safely and efficiently. 


Head First： Are you ever late getting to one of those tasks on the queue? 


JavaScript： Oh it happens. Luckily I’m the technology behind browser web pages, so how 
bad can it be if I get a little behind? You should talk to the guys that have to run code for 
spacecraft thrusters or nuclear power plant controllers, those guys have to live by different 
rules — that’s why they make the big bucks. 

Head First： I’ve always wondered what’s going on when I get the “Slow script, do you want 
to continue’’ dialog on my browser. Is that you taking a break? 

JavaScript： Taking a break! Hah. That’s when someone has structured their page such that 
I’ve got so much work to do, I can’t do it all! If you write a bit of JavaScript that hogs all my 
time, then your interaction with your user is going to suffer. I can only do so much. 


Head First： Sounds like you need some help. 


JavaScript： Well thanks to HTML5, 1 have help now because that’s where Web Workers 
come in. If you really need to write compute-intensive code, use Web Workers to offload some 
of the work — that way I can keep my focus, and workers can do some of the heavy lifting for 
me (without getting in my way). 

Head First： Interesting, we’ll look into that. Now, next question... Oh, wait, he’s gone, looks 
like he’s off to his next task. Serious guy, huh? 


you are here ► 


477 





how web workers work 


How Web Workers work 

Let’s take a look at a day in the life of a Web Worker: how workers are created, how they 
know what to do, and how they get results back to your main browser code. 

To use Web Workers, the browser first has to create one or more workers to 
help compute tasks. Each worker is defined with its own JavaScript file that 
contains all the code (or references to code) it needs to do its job. 



Browser 


Wbvkcvs av-c dc-f 'mcd 

by a sepavate 
JavaSdv-*if*t -file- 



Now, workers live in a very restricted world; they don’t have access 
to many of the runtime objects your main browser code does, like 
the DOM or any of the variables or functions in your main code. 


Fractal Explorer 



Browser 
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To get a worker to start working, the browser typically 
sends it a message. The worker code receives the 
message, takes a look at it to see if there are any 
special instructions, and starts working. 





Fracttl Explortr 


Your message says you need 
me to compute a 200x200 pixel 
section of a ray traced image. I 
can do that for you. 




O 


o 


Browser 



When the worker completes its work, it then sends a message 
back, with the final results of what it’s been working on. The 
main browser code then takes these results and incorporates 
them into the page in some way. 
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dom access 


Why not allow 

workers to access the DOM? 

I mean this seems like a lot of 
trouble to pass messages back and 
forth when all of these workers are 
running in the same browser. 


To keep things efficient. 

One reason the DOM and JavaScript 
have been so successful is that we’re able 
to highly optimize DOM operations 
because we have only one thread with 
access to the DOM. If we let multiple 
threads of computation concurrently 
change the DOM, then we’ll seriously 
impact its performance (and browser 
implementors would have to go to great 
effort to make sure making changes to 
the DOM is safe). The truth is, allowing 
a bunch of changes to the DOM at the 
same time can easily lead to situations 
where the DOM is in an inconsistent 
state, which would be bad. Very bad. 
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Sharpen your pencil 


Take a look at all the potential uses for workers below. Which ones might improve the 
design and the performance of an app? 


□ 

□ 


Caching data for use in your pages. 

Processing large amounts of data 
in arrays or large JSON responses 
from web services. 

Managing a database 
connection along with 
adding and removing 
records for the main page. 

Automated race track 
betting agent. 

Analyzing video. 




Spell checking the page as 
the user types. 

Polling web services and 
alerting the main page when 
something happens. 

Image processing of data in 
a canvas. 

Code syntax or other 
language highlighting. 

Pre-fetching data based on 
what your user is doing. 

Managing advertising for 
your page. 


>uv ideas iicv-c! 


( 一 f lie 矽 ?uop 干 pc| 叫人 w f 叩 o? ^ ^ 

u, ,uop ^ —妒 v 叫 u 人 ” ㈣ ” 叩平 p pp 。”。 人 P oo6 “高呷心 
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watch out for browser support 



Googled Chrome browser has some extra 
security restrictions that will prevent you from 
running Web Workers directly from a file. If 
you try, your page won’t run and you’ll get no 
indication of why (including no error messages 
telling you what’s wrong!). 


So, for these examples, we recommend either 
using a different browser, or running your own 
server and running the examples from http:// 
localhost. Or you can upload them to a hosted 
server if you have access to one. 


Y® u also use the CliV*omc Vuirtime 
sy/i*tdli — slloy/--pile—3ddcss—Pvom—Pilcs^ 
but v/c dov\{, vcdommchd *tliis sy/i*t^K 
beyond just -testing youv dodc. 




Watch it! 




Almost all the modern browsers support Web Workers, but there is one exception- 
Internet Explorer 9. The good news is that for El 0 and later, you can count on 

Web Workers, but with IE9 and all the IE versions before it, you，ll have to supply an 
alternative experience. 

But rather than worrying about IE specifically, here’s how you can easily check to 
see if any browser supports Web Workers: 


|*P v/o\rkc\rs a\rc supported, the pvopev-iy Worker 

will be dc-fmed ihc global sdopc, window. _ j 〜 d i*P Worker \s^i dc-fihcd, thch 

‘ ^ 〆3 。七 ho support \v\ the b\rov/scv". 

if (window [ ， ’ Worker"]) { 

var status = document.getElementByld("status ，。； 
status.innerHTML = "Bummer, no Web Workers ，'； 


v/C vc 


Y^>u II y/3h*t "to handle that ^ohditioh ih B way "that is 
(o^r you^r app. Hcv-C, wcVc just IcUihg the 

Cht with id— U sfo 


know by putting a message m dh 


usev- 
status”. 
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Your first Web Worker... 


how 


m. 


Let’s get down to the business of creating a worker to see 
this all works. To do that we need a page to put everything 
We’ll go with the simplest HTML5 markup we can get away 
with; type this into pingpong. html: 

<!doctype html> 

<html lang= n en n > 

<head> 

<title>Ping Pong</title> 

<meta charset= M utf-8 n > 

<script src="manager. j s n X/ script> 

</head> K ^ This Java£dv*if*t dodc is *to 

<body> 

<p id= n output" X/p> 

</body> ^ bc Soi 


trcait dhd all i\\t v/ov-kevs 




</html> 


outpu-t -Pvorw -the v/o\rkcir hcvc. 


Howto create a Web Worker 

Before we start implementing manager . j s, let’s look at how 
you actually create a Web Worker: 

Ti ^v-ca-tc a new wov-kcv-, wc dv-ca-tc a 

Worker object.. 

var worker = new Worker("worker.j s n ); 



Web Wbv-kcv- 


wcVc assij^'mg 七 he new 

v/o\rkc\r -to a JavaSdvip-t 
vaviablc Ktdnrtecl wovkcv*. 


... *tV>c w v/ov*kcv*.js , JavaSdv*ip*t *f 
doy>*ta"ms dodc (or v/ovkev. 


So that’s how you create one worker, but of course you don’t 
have to stop there; you can create as many workers as you like: 

var worker2 = new Worker("worker. js M ); … 讓 ， : 广 a 义 VO 

v/ovkevs 七 ha 七 rndkt 

var workers = new Worker ("worker. js") ; ^ use ihc same dodc as ouv- 

•f’llrs 七 >wovkcv. 

var another worker = new Worker("another worker.js n ); 


Or >wc dvca*tc o*thcv >wovkcvs based a 
JavaSdv-*if*t -file- 



Well see how *to use 
multiple >MO\rkcVS 

m 3 bit - 


you are here ► 


483 


writing a worker manager 


Writing Managers 


Now that you know how to create a worker (and how easy it is), let’s start 
working on our manager. j s code. We’ll keep this code simple and create 
just one worker for now. Create a file named manager. j s and add this code: 


window.onload = function() { 

var worker = new Worker("worker.j s n ); 



Wle’ll v/a*rt -fov 
pay *to -fully load- 


^ 〜 〜 A^d thch dv-caic a 
v/ov-kcv-. 


That’s a great start, but now we want to get the worker to actually do 
some work. As we’ve already discussed, one way we tell a worker to do 
some work is by sending it a message. To send a message we use the 
worker object’s postMessage method. Here’s how you use it: 


window.onload = function() { 

var worker = new Worker("worker.j s n ); 

v/cVc us’mg 七 he 

v/ov-kcv-^s pos-tMcssagc 
rwcihod {o sc^d *rt a 

message- Ouv- message is 

七 he simple si\r*mg X. 

The fos-t/l/lcssajc mcihod is dc-fmcd (or 
you \ y \ ihc l/Vlcb Worker API- 


worker. postMessage ( M ping M ); 

个 


， stiy[essage xJp Cl<sse 


Wa 灼七 * to scr\d move 
domflc% messages? 
Hcvc^s … 



You can send more than just strings in postMessage. Let’s look at 
everything you can send in a message: 


worker.postMessage ("ping") ; 
worker.postMessage([1, 2, 3, 5, 


11])； 


You tan scy^d a s*brmy. 

々一 ••• diY\ ••- 


worker.postMessage({"message" : "ping", "count" : 5}); 

… o\r cvch 3 j£0M obj 杜七 . 


You can’t send functions: 


worker.postMessage(updateTheDOM); 


You 七 ser>d 3 *fuy^tioirv.. ••七 rw’i # 七 doy>*ta'm 
3 rtftvtritt *to POM 3 llov/'m^ *tKc v/ovkcv 
*to DOM! 
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Receiving messages from the worker 

We’re not quite done with our manager. j s code yet — we still need to be able 
to receive a message from the worker if we’re going to make use of all its hard 
work. To receive a worker’s message we need to define a handler for the worker’s 
onmessage property so that anytime a message comes in from that worker, our 
handler will be called (and handed the message). Here’s how we do that: 


window.onload = function() { 

var worker = new Worker("worker.j s n ); 


worker.postMessage("ping"); 



dc-f a will 

act 乙 ailed y/Kcncvcv- wc \rctcWc a w>cssajc 
tw»s y/orkc^r. Uc message ^rom ^ 
y/ov-kcv- IS y/v-afped ^ object 


var message = "Worker says ’▼ + event. data; 
document.getElementByld("output").innerHTML = message 


€ 


message -fv-om 
y/ov-kcv wc II stu-f-f it 
\y\ a <f> element "m 
i\\t WTML fajc- 


The cvcht object 

passed -fco ou\r hdhdlev- 
hols s dd'te) pv-opc\rty 
"that ^orrtdihS -the 
message daia (山七 
wcVc -tha-t -the 

wo\rkc\r posted- 



慼 njy^essage Up Cl^se 


Let’s take a quick look at the message our onmessage handler is receiving from the 
worker. As we’ve said, this message is wrapped in an Event object, which has two 
properties we’re interested in: data and target: 

This is 七 he objcd*t that is so\i *(Vo 你 
*tKc y/ovkcv *bo *thc CoAt *m youv 
v/ov*kcv* pos*ts a message. 



worker.onmessage = function (event) 
var message = event.data; 4 ^^ 

var worker = event.target; 


The daia fv-opcv-*ty do^ta'ms -the message the 

y/o\rkcv a stvm 少 like 


Ahd the iaryi is a b> the wov-kcv- that 

scht the message. This tay\ tovfit ih ha^dy i-f you 

^cd to khow whidh 繪 k 饮 it’s L 省 II be usi 叫 

this latc\r ih the dhaptev*. 
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your first worker 


Now lefs write the worker 


To get started on the worker, the first thing we need to do is to make sure the worker can 
receive messages that are sent from manager. j s — that’s how the worker gets its work 
orders. For that we’re also going to make use of another onmessage handler, the one in 
the worker itself. Every worker is ready to receive messages, you just need to give the worker 
a handler to process them. Here’s how we do that (go ahead and create a file worker. j s 
and add this code): 


onmessage = pingPong; 



iVcYc -the 

p\ropcv-ty m ihc v/otrkey -to 



Writing the worker's message handler 


Let’s write the worker’s message handler, pingPong, and we’re going to start simple. 
Here’s what it’s going to do (you might have already guessed from the name pingPong): 
the worker’s going to check any message it gets to make sure it contains the string “ping”, 
and if it does, we’re going to send a message back that says “pong”. So, in effect, the work 
of the worker is just to get a “ping” and to answer with a “pong” 一 we’re not going to do 
any heavy computation here, we’re just going to make sure the manager and worker are 
communicating. Oh, and if the message doesn’t say “ping” ， we’re just going to ignore it. 

So the function pingPong takes a message and responds with “pong”. Go ahead and add 
this code to worker . j s: 



W\\tY\ wov-kcv v-cdcivcs a 

-from Codt, the 



function pingPong(event) { 
if (event.data == "ping" 
postMessage("pong"); 



badk a message -that says 

The 你 essay bddk *to 



Notidc the y/o\rkcv uses 
postAlcssajC *to stY\d messages, -too. 
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Worker 


Serving up a test drive 

Make sure you’ve got pingpong. html, manager . j s and 
worker . j s typed in and saved. Now keep those files open so 
you can review them and let’s think through how this works. 
First, manager . j s creates a new worker, assigns a 
message handler to it, and then sends the worker 
a “ping” message. The worker, in turn, makes sure 
pingPong is set up as its message handler, and then 
it waits. At some point, the worker receives a message 
from the manager, and when it does it checks to see 
that it contains “ping”，which it does, and then the 
worker does a lot of very little hard work and sends 
a “pong” message back. 

At this point the main browser code receives a 
message from the worker, which it hands to the 
message handler. The handler then simply prepends “Worker 
says ’’ to the front of the message, and displays it. 

Now, our calculations here say the page should display 
“Worker says pong”...okay okay, we know, you can’t take the 
suspense any more... go ahead and load the page already! 


Ping Pong 


says pong 




Wait a sec, just thinking ahead, 
if we ever create more than one 
pong worker I may actually have 
to break a sweat. 
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BE th^ 


It’s time to pretend you’re tiie browser evaluating 
JavaScript. For each bit of code below, act like 
you’re tire browser and write its output in tire 

lines provided. You can assume this 
code is using {ke same worker .js we 
just wrote: 



You cav\ dlictk i\\t solutions 
at cr\d <^c tiiaftcv-. 


window.onload = function() { 

var worker = new Worker("worker.j s n ); 
worker.onmessage = function(event) { 

alert("Worker says ’▼ + event.data); 


for (var i = 0; i < 5; i++) { 

worker.postMessage( n ping M ); 


window.onload = function() { 

var worker = new Worker("worker.j s"); 
worker.ommessage = function(event) { 

alert("Worker says ’▼ + event.data); 


for(var i = 5; i > 0; i--) { 

worker.postMessage("pong"); 
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window.onload = function() { 

var worker = new Worker("worker.j s n ); 
worker.onmessage = function(event) { 

alert("Worker says '▼ + event.data); 
worker.postMessage ("ping"); 

} 

worker.postMessage ("ping"); 


a Cav-c-Pul i-P you *tv-y these ； 
you have *to kill youv 

bv-ov/sc\r *to esdape -- 


window.onload = function() { 

var worker = new Worker("worker.j s n ); 
worker.onmessage = function(event) { 

alert("Worker says ’▼ + event.data); 


setlnterval(pinger, 1000); 

function pinger() { 

worker.postMessage("ping"); 
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exercise to use compact worker 


i^harpen your pencil 


While workers typically get their work orders through a message, they don’t 
have to. Check out this nice, compact way to get work done with workers and 
HTML. When you know what it does, describe it below. You can check your 
solution with ours at the end of the chapter. 


<! doctype html> 'uo*te.ivW 

<html lang= n en n > _ 


<head> 


<title>Quote</title> 
<meta charset= n utf-8 n > 


</head> 


<body> 

<p id="quote n X/p> 

<script> 

var worker = new Worker (" quote . j s n ); 
worker.onmessage = function(event) { 

document • getElementByld('▼ quote") . innerHTML = event.data; 


</script> 

</body> 

</html> 


4 . 


var quotes = [ M I hope life isn't a joke, because I don't get it. n , 

"There is a light at the end of every tunnel... just pray it's not a train !”， 
"Do you believe in love at first sight or should I walk by again?”]; 
var index = Math. floor (Math. random () * quotes. length); 
postMessage(quotes[index]); 


Youv dcsd\rip*tioir\ hcv-c ： 


TVy typing m ihc 
3hd lruhhih0 i-fc/ 
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Let’s add a couple of workers to our pingPong game. Your job is to fill in the blanks to complete 
the code so we have three pings sent to the workers, and three pongs back from the workers. 


you\r todc m 

blanks. 




\AfeVc 伙 cat ， 七一 ^kcvs, 

3^ a 叫， workers. 


window.onload = function() { 

var numWorkers = 3; 
var workers =[]; 
for (var i = 0; i < ; i++) { 

var worker = new ("worker.js n ); 

worker. = function(event) { 


alert (event. target + ’▼ says '▼ 

+ event. 


workers.push(worker) 


for (var i = 0; i < 
workers[i]. 

} 


wc \rc dddih^ the hew 
wovkcv* *to y/o\rkc\rs svvsy. 

i++) { 


( n ping n ); 


thereicir 

)umb 


D 


Can I just pass a function instead of a JavaScript file 
when I create the worker? That would seem easier and more 
consistent with how JavaScript usually does things. 

No, you can't. Here’s why: as you know, one of the 
requirements of a worker is that it not have access to the DOM 
(or to any state of the main browser thread for that matter). If you 
could pass a function to the Worker constructor, then your function 
could also contain reference to the DOM or other parts of your main 
JavaScript code, which would violate that requirement. So, the 
designers of Web Workers chose instead to have you just pass a 
JavaScript URL to avoid that issue. 


e no ^ 

Questi9ns 

vJ I When I send a worker an object in a message, does it 
become a shared object between my main page and the worker? 

No, when you send an object the worker gets a copy of it. Any 
changes the worker makes will not affect the object in your main 
page. The worker is executing in a different environment than your 
main page, so you have no access to objects there. The same is true 
of objects the worker sends you: you get a copy of them. 

Can workers access localStorage or make 
XMLHttpRequests? 

A- 

Yes, workers can access localStorage and make 
XMLHttpRequests. 
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including javascript code in a worker 



Let’s add a couple of workers to our pingPong game. Your job was to fill 
in the blanks to complete the code so we have three pings sent to the 
workers and three pongs back from the workers. Here’s our solution. 


Wc use ^umWbv-kcv-s -to i*tcv-atc three -times 
a^d dv-ca*tc y/ov-kev-s (-feci (ret *to 

this vav-iablc -to add more!) 

window.onload = function() 
var numWorkers = 3; 
var workers =[]; 

for (var i = 0; i < numWorkers; i++) { . 

var worker = new Worker("worker.j s"); 
worker.onmessage = function(event) { 



We set uf the 
message 

\y\ ouv ma'm fay 
toAt by us'mj *thc 
o^messa^c property 
o-f the y/o\rkcv-. 


alert(event.target + n says " 

+ event.data); 



workers.push(worker); 


use the daia pv-opc\rty -to yt 

the do 灼灼 *U message- 


for 


(var i = 0; i < workers.length; i++) 
workers[i].postMessage("ping ")f 



Wlc fmg y/o\rkcv 
y/i-th pos*tA 1 cssajc- 



You dowlci also use 

\k you like- 


needed bo *tV^c 
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Ive been wondering how 
to include additional JavaScript files in 
my worker. I’ve got some financial libraries 
rd like to make use of and copying and pasting 
them into my worker would result in a huge file 
thafs not very maintainable. 


Take a look at importScripts. 



Web Workers have a global function named 
importScripts that you can use to import one or more 
JavaScript files into your worker. To use importScripts 
just give it a comma separated list of files or URLs you’d 
like to import, like this: 

importScripts("http : //bigscience.org/nuclear•js n , 

"http : //nasa. gov/rocket • js, 
"mylibs/atomsmasher.j s n ); 



Plate z^\ro o\r mov-c dorwrwa—scpav*a-tcd 
vJavaS 乙 七 URL-S \y\ iinf»po\rtS(I.\rip"ts. 


Then when importScripts is invoked, each JavaScript 
URL is retrieved and evaluated in order. 

Notice that importScripts is a full-fledged function, so 
(unlike import statements in a lot of languages) you can 
make runtime decisions about importing, like this: 

if (taskType == "songdetection") { 

importScripts("audio.j s M ); 

Because 'impov-tSd\r"if*b a you 

tav\ impov-t dodc as task demands. 
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the mandelbrot set 


Virtual Land ftrab 

Explorers of the Mandelbrot Set have already grabbed areas of the virtual countryside and 
given them names like the lovely “Seahorse Valley，’’ “Rainbow Islands，’’ and the dreaded 
“Black Hole.” And given the value of physical real estate these days, the only play left seems to 
be in the virtual spaces. So, we’re going to build an explorer for the Mandelbrot Set to get in 
on the action. Actually, we have to confess, we already have built it, but it’s slow — navigating 
around in the entire Mandelbrot Set could take a very long time — so we’re hoping together 
we can speed it up, and we have a hunch Web Workers may be the answer. 


Fractal Explorer 


|^hnp://locaJho5t/- Bcth/HTML5/Fractal/fracUl.html 


C Cooglc 



Take a look around 

Go ahead and fire up http : / / wickedly smart. com/hf html5/chapterlO/ 
single thread/fractal. html and you’ll see a visualization of the Mandelbrot Set 
in the distance. Just click anywhere and you’ll zoom into an area of the map. Keep 
clicking to explore different areas, or reload to start over. Watch out for areas with black 
holes, they tend to suck you in. We don’t know about you, but while the scenery is 
beautiful, our viewer could be a little faster... ya think? It would be great to have enough 
performance to maximize the view to the entire browser window as well! Let’s fix all that 
by adding Web Workers to the Fractal Explorer. 


Like some 

p\ropc\rty OY\ the 

o-f the Vo\rtc^? 
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Well, if you happen to be a mathematician 

then you know the Mandelbrot Set is the equation: 

之 n+1 =z n 2 + c 

and that it was discovered and studied by Benoit 
Mandelbrot. You also know that it’s simply a set of 
complex numbers (numbers with a real part, and an 
imaginary part) generated by this equation. 

If, on the other hand, you’re not a mathematician, the best 
way to think about the Mandelbrot Set is as an infinitely 
complex fractal image — meaning an image that you 
can zoom into, to any level of magnification, and find 
interesting structures. Just look at some of the things you 
can find by navigating into the set: 



And why are we so interested in it? Well, the set has a few 
interesting properties. First, it’s generated by a very simple 
equation (the one above) that can be expressed in just a few 
lines of code; second, generating the Mandelbrot Set takes 
a fair number of computing cycles, which makes it a great 
example for using Web Workers. And finally, hey, it’s cool 
and a trip to work with, and what a great app to end the 
book with, don’t you think? 
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computing fractals 


How to compute a Mandelbrot Set 

Let’s take a look at how you’d typically structure your code to compute 
a Mandelbrot Set before we get workers involved. We don’t want to 
focus much on the nitty-gritty of computing Mandelbrot pixel values; 
we’ve already got all that code taken care of, and we’re going to give 
it to you in a sec. For now, we just want you to get sense of the big 
picture view of how to compute the set: 

To domfutc the Ma^dclb\ro*t Set V/C 
loop ovcv v-ov/ *thc ima^C- 


for (i 


0 


< numberOfRows; i++) { 


var row = computeRow(i); 
drawRow(row); 

thch wc dv-aw \row oh the sdv-cch. You 

W Probably see the v-ow-by-v-ow display wkh 
you \ruh "tKc "t ， CS"t t,odc. ih you\r b\rowscv*. 


-Pov- eadh 

vow v/c 乙 ompurte 

七 he pixels -Pov- 
七 hat vov/. 


Now this code is just meant to be simple pseudo-code — when it 
comes to writing the code for real, there are a few more details 
we need to get into: for instance, to compute a row we need 
to know the width of the row, the zoom factor, the numerical 
resolution to which we want to compute it, and a few other small 
details. We can capture all those details in a task object like this: 


Moic, ouv dim heve h> you 

be a hunf»c\ri^al analyst (who cav\ 

匕 ? de C^u3*tiohS with Complex hurnbcv*s )； 
its "to adap-fc 3 dorwpu-tc ih*tchsivc 
applidatioh -to use l/Vcb IVov-kcv-s. |-f you 
3\re ih-tc\rcstcd ih "the olspc^-ts 

<>p the /Wahddb\rot Set, iVikipedid is 
3 …七 pladc -to s-tav-i 


a 



The 
-Pad-fcov 


zx>on\ 


for (i 


0 


< mmberOfRows; i++) { 


var taskForRow 


var row = computeRow(taskForRow); 


createTaskForRow(i) 


drawRow(row) 


v/c pass -taskFovRow 
•nvto dompu-tcRov/, y/hidh 

-the Computed v-ov/. 


tu c -taskfov-Ro^ 

: WdUdsall 
data 

-to a v-ovi 



Level o( 
pv-Cdisio^ -fco 



Now the trick is going to be taking this and reworking it to divide 
up the computation among a number of workers, and then adding 
the code that handles giving tasks to workers, and handles dealing 
with the results when the workers complete the tasks. 
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How to use multiple workers 

You already know how to create new workers, but how do you use them to do 
something a little more complicated, like computing the rows of the Mandelbrot Set? 
Or applying a Photoshop-like effect over an image? Or ray tracing a movie scene? In 
all these cases, we can break up the job into small tasks that each worker can work 
on independently. For now, let’s stick with computing the Mandelbrot Set (but the 
pattern we’re going to use can be applied to any of these examples). 

To get started, the browser first creates a bunch of workers to help (but not too 
many — workers can be expensive if we create too many of them — more on this later). 
We’lj use just five workers for this example: 


TV^c Woy/scv JavaSoft todt 
traits a io 

sowC >wovk* 


4 




Fractal Explorer 




> j 

L±. 

0 htip://localhost/-Beih/HTML5/Fractal/fraciai. C Google 





Were, the imajc 
broken \y\bo little 


〈 *to dole out 
^ v-egio^s *to y/o\rkcv-s 
*to domfutc- 



Browser 


— Hcv-cs y/Ka*t v/c v /扣 七 *to 
to 个七 e The Woy/scv CoAt 
^ceds -to Weak u\> job 
Jc *tWlS imay mxo 

a humkev* of smsll "basks 
七 he y/ov-kev-s *bo torr^ic 






0 \ay wov-kev-s veady -fco 
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how to compute with workers 


o 


The first 

Q , region of the 
image is mine! 


o 


O 



o 



o 


O 



Next, the browser code doles out a different part of 



Each worker works on its own piece of the image independently. As a 
worker finishes its task, it packages up the result and sends it back. 


Fractal Explorer 


J 1+ ^ hwp://tocalhosi/-B«ih/HTMLS/Fraaal/fracm C 


Wbv-kcv-s se^d ba^k -the the ficdcs 
o-f domfuted 








c 

o 
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putting javascript to work 


As pieces of the image come back from the workers they are aggregated 
into the image in the browser, and if there are more pieces to compute, new 
tasks are handed out to the workers that are idle. 



All ficdcs o-f ima^C 
dv-catcd by -the wov-kev-s are 
agyegated m*to -the -fmal imajc 


With the last piece of the image computed, the image is complete 
and the workers sit idle, until the user clicks to zoom in, and then it 
all starts again... 


Fractal Explorer 


I 1 + JO htip://locair>ost/~B€th/HTMLS/FracMl/fraciai C 、 


The is Complete, 

the wo\rkc\rs v-cst Uh-til 
is move wovk. 
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how workers improve applications 


What does it 

matter if I break up the task 
and distribute it to workers? I 
mean, my computer still has the same 
CPU, how could the computation get 
any faster? 


It can be faster in two ways... 

First consider an application that has a lot of “computing” going 
on that also has to be responsive to the user. If your application 
is hogging a lot of JavaScript time, your users are going to 
experience a sluggish interface that feels slow (again, because 
JavaScript is single-threaded). By adding workers to such an 
app you can immediately improve the feel of the app for your 
users. Why? Because JavaScript has a chance to respond to 
user interaction in between getting results from the workers, 
something it doesn’t have a chance to do if everything’s being 
computed on the main thread. So the UI is more responsive — 
and your app’s just going to feel faster (even if it isn’t running any 
faster under the hood). Don’t believe us? Give it a try and put 
some real users in front of your app. Ask them what they think. 

The second way really is faster. Almost all modern desktops 
and devices today are shipping with multicore processors (and 
perhaps even multiple processors). Multicore just means that 
the processor can do multiple things concurrently. With just a 
single thread of control, JavaScript in the browser doesn’t make 
use of your extra cores or your extra processors, they’re just 
wasted. However, if you use Web Workers, the workers can take 
advantage of running on your different cores and you’ll see a real 
speedup in your app because you’ve got more processor power 
being thrown at it. If you’ve got a multicore machine, just wait, 
you’re going to see the difference soon. 
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Can I have as many 
workers as I want? 


In theory，not in practice. 

Web Workers aren’t intended to be used in large 
numbers — while creating a worker looks simple in code, 
it requires extra memory and an operating system thread, 
which can be costly in start-up time and resources. So, in 
general you’ll want to create a limited number of workers 
that you reuse over time. 


Take our Mandelbrot example: in theory you could assign 
a worker to compute every single pixel, which would 
probably be much simpler from a code design perspective, 
but given that workers are heavy-weight resources, we 
would never design our app that way. Instead, we’ll use a 
handful of workers and structure our computation to take 
advantage of them. 

Let’s get a little further into the design of the Fractal 
Explorer and then we’ll come back and play with the 
number of workers we’re using to understand the 
performance implications. 
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exercise your brain doing some code design 




You’ve certainly got a lot of background now on building Web Worker apps, how to create and use 
workers, a bit about how you can solve big computations by breaking them down into small tasks 
that can be computed by your workers, and you even know a little about how Mandelbrot sets 
are computed. Try to put it all together and think through how you’d take the pseudo-code below 
and rewrite it to use workers. You might first assume you have as many workers as you need 
(say a worker for every single row), and then add the constraint that you have a limited number of 
workers (fewer workers than the number of rows): 


for (i = 0; i < numberOfRows; i++) { 


var taskForRow = createTaskForRow(i); 
var row = computeRow(taskForRow); 
drawRow(row); 



add Web Wov-kcv-s? 


Your notes go here: 
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Create HTML 
I I 轉 Reaps Baw Cope 
Create workers 
Start the workers 
Implement the workers 
Process the results 
User interaction code 


I I Start the workers on their tasks. 

I I Implement the worker code. 

I I Process the worker results as the workers complete 
their tasks. 

I I Handle click and resize events in the user interface. 


Let's build the Fractal Explorer app 

Here’s what we need to do: 

I I Set up our HTML page to hold the Mandelbrot App. 

I I Get all the lUapM fiaKd CPP^ entered (or downloaded). 

I I Create some workers and get them set up to compute. 


Creating the Fractal Viewer HTML Markup 

First we need to set up an HTML page to hold our app. You’ll want to create an HTML 
file named fractal. html and add the following markup. Let’s check it out: 


As usual, s s-tahdav*d 
-file. 


<!doctype html> 

<html lang="en M > 

<head> 

<title>Fractal Explorer</title> 

<meta charset="utf-8 n > 

<link rel= n stylesheet" href= M fractal.css M > 
<script src= M mandellib. js M X/script> 
<script src= M mandel. j s M X/script> 

</head> 


tWs allthe 隱 feaps Cope 

^o*t -fov you, this doirrtams all 
the Code as v/cll as some 

todt -fov yafhi 乙 s. 



Neve's i\\t JavaS^v-ift toAt 
v/cVc *to be >wvrt” … 

|-f youVc v/o 灼 dcvmg y/hcv-c y/o\rkc\r CoAt is 
jomj *to 30, \rcmcmbcv-, y/c dor / 七 I’mk di\rcd*tly *to d 
y/o\rkcv- JavaSd\rip*t -file, v/C \rc*fcve 灼 dc -file v/l 

y/c d\rca*tc y/ovkc\r *m dode- 


when 


<body> 

<canvas 

</body> 

</html> 

"This Code 0oes ih 


id= M fractal" width="800 n height="600"X/canvas> Look/ 0u\r -fvichd "the 

<^ahvas> is back" 

/Ud the <body> has a ^a^vas dement iVc sc-t i-t -to miiial si« o*f 000 y. boo 
pixels, bu-t v/cll sec how -to rt "to 七 he wid 七 h and hcijhl o( ihc wmdov/ “s— 

JavaSd\ript A-ricv* all wc as la\rjc a 扣 dCoi as we yt/ 
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ready bake fractal code 


^m ： Reaps Cm 


Rcmmdcv -： you cav\ dov/^load all codt 


We have to tell you we were planning on an entire chapter on the wonders of 
computing the Mandelbrot Set... we planned to explain it to you in detail, including a 
history of Benoit Mandelbrot, how he discovered it, all its amazing properties, pixel 
optimizations, color maps, and so on, but then we got the call from our editor—you 
know, THE CALL I guess we were running a bit late on this book, so our apologies, 
but were going to have to give you some Reapy BaKe Cope code to do the low-level 
computation of the Mandelbrot graphics. Here's the good side though ： we can focus 
on how to use Web Workers without spending the next couple of days on math and 
graphics. That said, we encourage you to explore those topics on your own! 

Anyway, first we've got the code used to manage tasks and draw the rows for the 
fractal images. Start by typing this code into a file called 、 'manddlib.js 〃： 


var canvas; 
var ctx; 


Motide ouv da^vas 匕 oi^tc 火 t a\rc hcv-c- 


var 


max 


var i min 


var r min = 


var r max 


var escape 


.5; 


1.5; 

〆 _^ These arc *thc global variables -the 

2.5; 

Ma^dclbv-o*t yafhids code uses -to 

.5; 

domfuic the set by\A display it- 

=1024; 


1025; 


:[]; 



function createTask(row) { 
var task = { 
row: row, 

width : rowData.width , 
generation : generation, 
r min : r min. 




TV^is an 

i\xt data needed ^ ^ovkcv 

{jo a voy/ ok 心 cU, 

。 ㈣ 七 . You’ll 卞七 

V^OY/ V/C f ass i\\\s object to the 


Y/ov-kcv- {p 


use. 


r_max : r_max, 

i : i_max + (i_min - i—max) * row / canvas.height, 
max—iter : max_iter, 
escape : escape 


return task 


TWis dodc joes m 
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ft 鄉 y Bated Cm 


function makePalette() { 

function wrap(x) { 

x = ((x + 256) & Oxlff) - 256; 
if (x < 0) x = 
return x; 


■x 


for (i = 0; i <= this.max 一 iter; i++) { 

palette.push([wrap(7*i), wrap(5*i) 



Create HTML 

_ Reaps Bane Cope 

□ 

Create workers 

□ 

Start the workers 

□ 

Implement the workers 

□ 

Process the results 

□ 

User interaction code 


Malciic a Uy sci ^ 

0,1 U n ^ 9b ^° Us ' m ^ ^is 

It , ，h (beU ) 铋 

thc 产 f wc 9^ a wov^k^ io 


wrap(ll*i)]); 


w 

function drawRow(workerResults) { 

var values = workerResults.values; 
var pixelData = rowData.data; ^ 

for (var i = 0; i < rowData.width; i++) 
var red = i * 4; 
var green = i * 4 + 1; 
var blue = i * 4 + 2; 


dvav/Roy/ takes results 心⑽ 
y\ccr 3r\d dv-av/s m*to 6 扣 vas. 


I 七 uses 七 his \rowDaia 
vavi^blc "fco do vov/D^^toi 
is a o^c—mow 
object "that holds the 
actual pixels -Pom -tha-t vow 

o( ihc da^vas. 


var alpha = i * 4 + 3; 

pixelData[alpha] = 255; // set alpha to opaque 
if (values[i] < 0) { 

pixelData[red] = pixelData[green] = pixelData[blue] =0; 

} else { 

var color = this, palette [values [i] ] ； v/C use falcUc 


pixelData[red] = color[0]; 
pixelData[green] = color[1]; 
pixelData[blue] = color[2]; 


/ ^ map vcsult -fvom y/ovkev* 
(\us*t a hur^bev) *to a tolov. 


This tode 


^ 3 hdcllibjs. 


goes ih 


ctx.putlmageData(this.rowData , 0, workerResults.row) 

f[r\d hcv-c^s >wKcv*c >wc >wv-'i*tc 七 k pixels 
-to *thc Ima^ePaia objed 七 m 七 he 
doy>*tcx.*t ok 七 k dav>vasf 





This Codt should be 
-familiav -； its similav- *to 
wkd't wc did CKaftcv* 
钐 v/i*th video dir>d d3y>vas. 


you are here ► 


505 







ready bake fractal code 



R 鄉 y BaKd Cm (>__••• 



function setupGraphics() { 


sets uf tV^c global variables used 
by all yafWuu dv-aVmj todt as y/cll as the 
Mandelbrot domfutation. 


canvas = document. getElementByld ( n fractal n ); 
ctx = canvas.getContext( M 2d"); 




canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 



fWe s wheve wc yra\) the ta^as 
ahd the dohtext ahd set the miiial 
Width 3hd heigh-t of -the dahV^s. 


var width = ((i_max - i_min) * canvas.width / canvas.height); 

var r mid = (r max + r min) / 2; 干 i i 」 l 

一一一 / These avc vav'iablcs used to 

r 一 min = r_mid - width/2 ; 卜一 domfutc ihc /1/Uddot Set 

r—max = r_mid + width/2; 

(V~-\ 

rowData = ctx. createImageData (canvas . width , 1); ttcv*c, v-c , 

voy/Pa*ta variable (used to —*b 

七 he v>'»%cls *to *tKc tarwas). 

makePalette(); 

^\y\A iicvc >wcVc 

palc*t*tc <Jc tolovs v/c vc usm^ *to 

dva>/ 七 k set as a ^acia\ imay. 
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tl 鄉 y Bated Cm ⑽槪秦 .. 


This Reapy Cope is what the worker will use to do its mathematical 
computation of the Mandelbrot Set. This is really where the magic of the 
computation happens (and if you explore the Mandelbrot Set more deeply, 
this is whereyoull want to focus). Type this code into u workerlib.js ,/ ： 


function computeRow(task) 
var iter = 0; 




domfutcRow domfu-tcs OY\t V-ow o-P da^ta o-f 

Ma^dclkvo-t Set IVs y\itv\ av\ object with all the 

pa 乙 kayd uf values i-t -to Compute that v-ow. 


Noiidc ihai (o>r v-ow 


var c—i = task.i; 
var max—iter = task.max—iter; 
var escape = task.escape * task.escape; 
task.values =[]; 

for (var i = 0; i < task.width; i++) 

var c_r = task.r_min + (task.r 一 max - task.r 一 min) * i / task.width; 
var zr=0, z i = 0; 


TKaVs a lo-t 


o( the display, wcVc domg 600 ^^ 

〆 "bwo loops, oy\c (or eadh 
^ pi^-cl m "the v*ow … 


for (iter = 0; z_r*z_r 
// z -> z A 2 + c 
var tmp = z—r*z—r - 
z_i = 2 * z—r * z_i 
z_r = tmp; 

} 

if (iter == max—iter) { 
iter = -1; 


z 


* 


z i < escape && iter < max iter; iter++) 


z i*z 


c r ; 


c 



上 ahd 3ho-thc\r loop -to -Pihd i\)t v-igh-t v«i!ue 
•fov* that pixel. This ihhCV- loop is whcv-c the 
^ompu-b-tiohal Complexity is, av\d -this is wh) 
the CoAt \ruhs so -Pcls-tcv* whe^ you have 
multiple do\rcs oh youv- Computed 


task.values.push(iter); 


return task 


This Codt ^oes ih 
v/o\rkc\rlibis. 


Tk ⑼ d vcsul-t o( all Computation is 
a value lKa*b gels added b> an avvay ok 
r\^t& values ； is fu*t b3tk m*to 

-task objcd.*t so *tiic y/ovkcv- t^r\ scr\d 

1 七 batk *to ma'm Code- 


vesu 


Wlcll take d dosc\r look 
七 his pa\rt m a bit. 


you are here ► 
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how to manage workers and tasks 


Creating workers, and giving them tasks... 

With the Reapy Cope out of the way, let’s now turn our attention to writing the code 
that is going to create and hand tasks to the workers. Here’s how it’s going to work: 


Create HTML 
0^ » BaKe Cope 

Create workers 
Start the workers 
Implement the workers 
Process the results 
User interaction code 


o We create an array of workers, initially all idle. And an image 
with nothing computed (nextRow = 0). 






❷ We iterate through the array, and create a task for each 
idle worker ： 




❺ We continue to iterate, looking for the next idle worker to 
give a task to. The next one is nextRow = 1. And so on... 
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Writing the code 

Now that we know how we’re going to create and manage our workers, let’s 
write the code. We really need an initial function for this, so let’s create a 
function in mandel. j s named init — we’ll place a few other things in it as 
well, to get the app up and running (like making sure we have the graphics 
intialization out of the way): 


["✓f Create HTML 

aps Bane Cope 

Create workers 
Start the workers 
Implement the workers 
Process the results 
User interaction code 



First IcVs dtUt a variable ^Ids 厂十 

y/orkev-s y/c y/ant Wert ^oosmj -ted ^ 
play ^\i\\ tV^is 诎⑼ you've jot work”. 


var numberOfWorkers 
var workers =[]; 



Ay\d hevVs an erwpiy av-v-ay b> 

hold ouv v/ovkev-s. 


window.onload 


init; 


LcVs sc*t up 3^ o^lodd Kdhdlcv* 七 tails •… i 七 
i\\t pay is -fully loaded- 


l/Vhy 0 ? I/Vdl, wc happen -to 
d pu^tev* y/i"th 0 


dov-cs so ii rwaidhes well 
wi 七 h ouv dorwpu-tc powc\r. 

i-P you doy\^ have 
纪 Co^c^f 0 s a o^ood KUAmbcv* 
to iv-y -Piv-st 


function init() { 

setupGraphics(); 


This -Pu^dtioir> is dc-P'mcd m the Ready Bake Code a^d handles jctt'mg ihc dartvas 

the da^vas -fco youv- b\rov/sc\r ； s siz^, a^d a -Pew o-thev jvaphid details. 




for (var i = 0; i < numberOfWorkers; i++) 
var worker = new Worker("worker.j s"); 


worker.onmessage = function(event) { 

processWork(event.target, event.data); 


worker.idle = true 


workers.push(worker) 


startWorkers(); 



1^1 oyj, rtev-ate ovcv the number of y/o\rkcv-s... 

…釙 d a ^ worker ^v-om w y/orkcr.js , 

\n\\\cM we hav / 伙’ 七 wvitteh yet 

… set t^cM wovkev-^s message hdhdler 
■to a -Puh^tioh -tha-t dal Is -the pv-o^sslA/bvk 
-Puh^tioh, ahd well pass it the cvcht-bvgcl 
( 七 he wo\rkc\r 侃 just ^ihished), 3hd -the 
cvchtda*t3 (the \rcsul*ts -Pvorw -the wovkcv-). 

0r\t move •tiVmj … vemembev- wc avc -fco y/a^-t *bo know whidh 
y/ov-kev-s avc y/ovkmg v/hi 匕 h avc idle- To do 七 well add a 的 u idlc w 

p\ropcv-*ty *bo *thc y/ovkc\r. This is ouv- o^iy\ p\ropc\rty, i^o 七 pa\rt o( *thc 
IVcb tVovkcv- API- ^ow wcVc i*t *to *brue srn^c wc haven't 

yy/cy\ wo\rkcv-s a^yth'mg *bo do- 


A^d v/c ddd "the v/o\rkcv* wc jus 七 
^caicd -to 七 he a\rvay <4 - wovkevs. 



‘d -finally, a-t some fom-t v/c r>ccd -to sta\rt -these wovkevs v/ovkmj. iVell pu 七 
七 ha 七 Code m a earned sta^-tlVbv-kcvs, whidh we v\ctd bo wviic. 


TV^'is todt joes 
m m 3 r\dcl js. 
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starting your fractal workers 


ftettmg the workers started 

Okay we’ve got a few things to knock out: we need to start the workers, we need to 
write the function that can process the work that comes back from the workers and, 
well, we need to write the code for the worker too. Let’s start by writing the code to 
start the workers: 


Create HTML 

呸 - Reapy Bane Cope 

Create workers 

Start the workers 
Implement the workers 
Process the results 
User interaction code 


WcVc *tv/o mov-c global 

variables -to 丁 ^ ^ 心七 R oy/ , ^\cM braeV row wVc 

I , on as we y/ov-k ouv- v/ay -t^v-oujV) i\\t i^ay. 

_^vcv-y usev- zx>oms "m*fco Ma 朽 delbvo 七 irmay v/c s*ta\rt 


var nextRow = 0; 


var generation 


： o ； ^ 


function startWorkers() { 
generation++; 
nextRow = 0; 


for (var i = 0; i < workers.length; i++) 
var worker = workers[i]; 


a tomfu*tatior\. TKc yv>cv-atiov> variable keeps iv-adk 

Kov/ md^y times v/c^vc Aor\t (iVis. Move oy\ *tKis latev. 

^_ The s-ta\rtl/Vo\rkc\rs -Pur\diio^ is go'mg -to stav-t *thc v/ov-kevs, 

扣 d also vcs-tdirt "therw i-p "the usev zooms nrrto *thc So, 

eadh 七 me v/e s-ta\rt "the v/ov-kev-s y/c v-esrt \nc%-LRovj -fco zjCVo 

^ rtoN, ^CSC av-c used 

bedome dearer m a b’t.. 





if (worker.idle) 


var task = createTask(nextRow); 

worker.idle = false; 
worker.postMessage(task); 


nextRow++; 




Koy/, loof> ovc\r all >wo\rkc\rs m {\\t 
y/ov"kcv"s avvay -- 

… and c\\tcM -to see i*f 滅 idle. 

l-f i-t is, wc make a -task -Pov 七 he wovkcv- -fco 
do. "This "tolsk is *to donf\pu"tc 3 v*ow o^* "the 
M3r)delb\roi Set dvca-tcTask is deemed m 

rwa^ddlibjs, av\d i-t \rrtums a task objed-t v/iih all 
"the da-ta -the Y/o\rkcv- needs ■feo Compute 七 ha 七 


\row. 


Kov/, v/cVc about *to jive the y/o\rkcv 
somc*th'mg *to do, so wc set the idle fV-ofC\rty 
七 o -false its busy). 

jU kircs wheve WC tell the wovke^ -to 赠 k, 

by postmg a message the task. The wovkcv 

IS listchmg ioir a message, so whch it gets this 
message, it will stav-t v/ov-kmg oh the task. 


f[Y\d -P*mally> >wc *mdvcmcir>*t *thc v-ov/, so 
-t^c Y\t^i >wov-kcv- ^cis *tKc ro^i. 


This to&t joes 
m m 3 ir\dicl js. 
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ImplemeHtmg the worker 

Now that we’ve got the code to get our workers started by passing each a task, let’s 
write the worker code. Then all we need to do is come back and process the results 
from the worker, once the worker has computed its part of the fractal image. Before 
we write the code for the worker though, let’s quickly review how it should work: 


Create HTML 
^ Reaps Bane Cope 
Create workers 
0" Start the workers 

Implement the workers 
Process the results 
User interaction code 


o Worker is handed a task with 
postMessage. 


❷ The worker takes the task and passes it to a 
Ready Bake function to compute the row. 


## n o 


Fractal Explorer 


+ ^ htip://locairK>si/-B€ih/HTMLS/Fracul/fraciai. C Google 



computeRow ( 




❺ The computed row is 

completed and we need to 
send it back to the main 

Result is sent back from worker with P a 9 e code. 
another postMessage. 


So let’s implement this: go head and type the following code into your worker. j s file. 


St “ 

WW dtUtd m liWa—Ic. 


厶 

importScripts ("workerlib • j s ▼▼); 
onmessage = function (task) { 



All the v/ov-kcv- dots is set uf the o^mcssajC 
handler. |*t docs^-t r\tt& h> do else, 

because all rk does is wait (or messages -fv-om 
ma^dcl js -to stav-t v/ov-k'm^l 


var workerResult = computeRow (task. data); 

K ： |*t jets i\\c data -from i\\t -task, a^d ?asscs 
postMessage (workerResult) ; bo tom\>u*tcRov/ v/WA docs 

The v-csul-t o( 七 he saved m 七 he 

wo\rkc\rRcsuli variable, is pos-ted ba 匕 k "to ihe Tii'is codt y>ts 

r^’m JavaSdv-ipi us’mg pos-t/l/Jcssagc- m y/o\rkc\r js 


you are here ► 
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close up on fractal tasks 


A little pit stop... 

That was a lot of code in just a few pages. Let’s take a 
quick pit stop, and refuel our tanks and stomachs. 

We also thought you might want to get a quick peek 
behind the scenes and see what the worker tasks and 
results look like (they look remarkably similar as we’ll 
see). So, grab a bottle of sarsaparilla and let’s take a 
look while you’re resting... 




Ckse up m Tasls - 

So you’ve looked at the call to createTask and postMessage, which uses the task: 


var task = createTask(nextRow); 


worker.postMessage(task); 


And you might be wondering what that task looks like. Well, it’s an object made 
up of propeties and values, let’s take a look: 


Tiic task dor\*ta'ms 
all values 
y/ovkcv *to do 

its Computation. 


task = { 


ldeivt_*fies 七 he \row wcVc 七 he 

pixels value (or. 



row: 1, 
width : 1024 
generation : 


VOV/. 

^^ hov/ mair>y times zoomed *m. 

Wit’ll see how *tKis is used m d bit" 


r_min : 2.074, 
r_max : -3.074, 
i: -0.252336, 
max_iter : 1024,/ -tV^csc Co^bro\ the pvct'isio^ 

escape : 1025 J >wcVc domf 


These dc-Pii^C the a\rca o( ihc 
/V]ar>ddb\ro-t v/cVc domputmg. 
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Ckse up 


And what about the results we get from computing the row in the worker? 


var workerResult = computeRow(task.data); 
postMessage(workerResult); 


What does this look like? Remarkably similar to the task: 


Tiic v/ovkcv "tskcs tiic *t3sk 


passed "to i*t ⑼ adds 

a values pvopcvty *to i*t 七 
tortta'ms i\\t data needed *to 

dvav/ *bKc vov/ oy\ *bKc tar\vas. 



workerResult = { 
row: 1, 
width : 1024, 
generation : 1, 
r_min: 2.074, 
r—max: -3.074, 
i: -0.252336, 
max—iter: 1024, 
escape : 1025, 



This is all the same as the task. 

Thats v/liCh wc 

yti"t bddk -flrorh the v/o\rkcv* wc 
khow cvc\rythih 9 about the task. 

f[\\, but 七 iVis is Tiicsc 
avc values Jc catii 



pixel, v/KidK still r\ttd *to 

be mdffed bo Golovs (y/WA 
m dv-a^Roy/). 


values : [3, 9, 56, ... -1, 22] 




Time to get back ow the road... 

Thanks for taking some time with us to check out the 
tasks and results. You better take a last swig of that 
sarsaparilla — we’re hitting the road again! 



you are here ► 
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processing worker results 

Pack to the code: how to process 
the worker's results 

Now that you’ve seen how the worker’s results work, let’s see what happens 
when we get them back from the worker. Recall that when we created our 
workers, we assigned a message handler named processWork: 


Create HTML 

呸 - Reapy Bane Cope 

Create workers 
0" Start the workers 
[yj 1 ^ Implement the workers 
Process the results 
User interaction code 


var worker = new Worker("worker.j s M ); 

worker.onmessage = function(event) { 

processWork(event.target, event.data); 



message V^a^dl^ tails ^otcssWork, 
Pdss'm^ i*t -f rom *tV)C y/ov-kcv-, Bv\d 

also tav-yt, wWi 乩 k just a 
{jo -bv^c y/orkc\r t^a*t scyrt data. 


When a worker posts a message back to us with its results, it’s the 
processWork function that’s going to handle it. As you can see, it is passed 
two things: the target of the message, which is just a reference to the worker 
that sent it, and the data of the message (that’s the task object with the 
values for a row of the image). So our job now is to write processWork 

(enter this code in mandel • j s): Wc hand ihc results io dvawRow 

function processWork (worker, workerResults) { ^ "^° the pixels -fco "the ddi^vds. 

f[Y\d ouv- y/ovkcv is dll -fvee, so v/c Uv\ 
VC3ssi^ i*t *to 3 r\o*t^CV" *t3sk- To do 
| c Vs v/vi*tc d \rcassi^Wb\rkc\r. 


drawRow(workerResults); 
reassignWorker(worker); 



We’re almost there, so let’s just knock out reassignWorker while we’re at it. 

Here’s how it works: we check the row we’re computing by using our nextRow 
global variable, and as long as there’s more to compute (which we can determine 
by looking at how many rows are in our canvas), we give the worker a new 
assignment. Otherwise, if there’s no more work to do, then we just set the 
worker’s idle property to true. Go ahead and enter this code in mandel. j s too: 

|^* V"OW is tha 灼 OV" C^u3l *fco *thc height "the 

da^vas, y/cVc dor\c! iVc vc -Pilled the da^vas wi*th 
v-csul*b -Pv-om the y\/la^ddb\ro*t Set v/o\rkcv-s. 

Canvas is a global vav-iablc v/as assi^ed v/c called 

\y\ ouv mi*t 


function reassignWorker(worker) 

nextRow++; 


var row 


if (row >= canvas.height) { 
worker.idle = true; 

} else { 

var task = createTask(row);\ 
worker.idle = false; k 

worker.postMessage(task); I 


But wcW still got v-ows -to do, wc a 

MW task +o\r tk hext \row "to do, make su^e 
败 wovkc^s idle piropevty is hhc, a^d Post a 
message with the hew task -to the wovkc^. 


TVis code joes 
•m m 3 r\dcl js. 
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Psychedelic test drive 运 

Enough code already! Let’s road test this thing. 
Load the fractal. html file into your browser 
and see your workers going to work. Depending 
on your machine, your Fractal Explorer should 
run a little faster than before. 

We haven’t written any code to handle resizing 
your browser window, or clicking to zoom into 
the fractal for that matter. So, for right now, all 
you’ll be able to see is the image on the right. 

But, hey, so far so good, huh? 


Handling a click event 



it is/ Too bad v/c 


We’ve got our workers busy working to compute the Mandelbrot Set and 
returning results to us so we can draw them on the canvas, but what happens if 
you click to zoom in? Fortunately, because we’re using workers to do the intense 
computation in the background, the UI should be snappy in dealing with your 
click. That said, we need to write a little code to actually handle the click. 

Here’s how we do that: 

The first thing we need to do is add a handler to take care of mouse clicks, and 
remember, the clicks are happening on our canvas element. To do that we just 
add a handler for the canvas’s onclick property, like this ： 


zjoom, -fcoo bad ii doesn't 
-Pill ihc v/holc v/'mdow yci, 

but well yt "to -that- 


[✓f Create HTML 
0 ^ @ Reaps Cope 


0 

0" 

0" 

□ 


Create workers 
Start the workers 
Implement the workers 
Process the results 
User interaction code 


canvas.onclick = function(event) { 
handledick (event. clientX, event • 


clientY) 





l-P the CByw/Bs is c\ \cVtA OY\, y/e dal I 
七 he ha^dlleClidk wiili *tlic 

卞 and y position o( 七 he didk. 


Add this code below the call to setUpGraphics in the init function of 、、 mandel.js〃. 


Now we just need to write the handleClick function. Before we do lefs think about this a 
second ： when a user clicks on the canvas it means they want to zoom into the area they re 
clicking on (you can go back to the single-threaded version at 

http :// wickedlysmart.com/hfhtml 5 /chapterl 0 / singlethread/fractal.html 

to see this behavior). So when the user clicks, we need to get the coordinates of where 
they want to zoom, and then get all the workers working on creating a new image. 
Remember too, we've already got a function to assign new work to any idle workers ： 
startWorkers. Let's give it a try... 
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testing and improvements 


ha^dleCli^k is called -the 
usev dli^ks *thc da^vas -to 
Zjoom m*to *thc -f\rad*tal. 

function handleClick(x, y) { 



Wt fass \y\ the %, y position 
*thc t\\ck so wc k^ow whcv-c they 

di 乙 ked o 灼 "the s£re 



var width = r max - r min; 

— — V 

var height = i_min - i—max; I 

var click_r = r—min + width * x / canvas.width; 
var click i = i max + height * y / canvas.height 


\\s Code \rcsizxs i\\c a\rca H 
VatlaUe a 代 t 。 个 ^ 

Y ^os'i*bioy\ at *tV>c ok t 

^ avea. I*t also makes su\rc -t^c 

Uas 仏 e same asped 七 七》。 


var zoom = 8; 

r_min = click_r - width/zoom; 
r max = click r + width/zoom; 


i—max = click_i - height/zoom; 
i min = click i + height/zoom; 



This is v/hcv^c we set the global vairiablcs that 
arc used *to dv-catc -tasks 4 *ov wov-kev-s ： -the zjoom 
level detev-m'mes hoy/ -fav Zjoomcd m we m*to 
■the -Pvad*tal, detev-m'mes y/hidh values o-f 

•the Ma^ddbv-o-t Set are bc'mj domfu-ted- 


startWorkers (); ( —— Now, v/eVe \rcady -to vestav-i ihc v/ov-kev-s. 


TWis dodc joes 
’m m 3 r\dicl js. 


Another test drive 

Let’s give those code changes a try. Reload 
fractal. html in your browser and this time 
click somewhere in the canvas. When you 
do you’ll see the workers start working on the 
zoomed-in view. 

Hey, you should be able to start exploring now! 
After you’ve played around a bit, let’s make a 
few final changes to get this implementation all 
the way there. 


hl\Ce! We Zjoovn, but 
v/c still y\ccd io v-csiic 


七 he {jo <Pi 七 ouv 


y/mdov/ -fully. 
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Fitting the canvas to the browser window 

We said we wanted the fractal image to fill the browser window，which means 
we need to resize the canvas if the window size changes. Not only that, but if we 
change the canvas size we should also fire off a new set of tasks to the workers 
so they can redraw the fractal to fill up the new canvas size. Let’s write the code 
to resize the canvas to the size of the browser window, and we’ll also restart the 
workers while we’re at it. 


Create HTML 
0^ 蠢恥卿 肋辟 Cow 
Create workers 
Start the workers 
pyf Process the results 
Process the results 
User interaction code 


vcsizjcTolV'mdoy/ makes suve the CByw/Bs 

width av\d heijhi av-c srt b> 你 atdh 

hev/ width ad height o( 七 he y/mdow. 


function resizeToWindow() { ^ 

canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 

var width = ((i—max - i_min) * canvas.width / canvas.height); 

var r mid = (r max + r min) / 2; | 七 also u\>da*tcs W\t values v/ov-kev- 


r_min = r_mid - width/2 ; 
r—max = r_mid + width/2; 

rowData = ctx.createlmageData(canvas.width , 1) 


startWorkers() 




V 


ot\Ct agai^ wc v-cs-tav-t ihc v/ov-kevs. 


y,»ll use -to do \b •咖 based O” 

如心 (v/e -akc su^e 

七 k always ta^vas a^d 

ma'mla'm asfett ra*b 。 。《如 y,mdoY/ * 

Then’s ohe admihis^alivc detail that uses a global 
variable wc havch'-t -told you abou-t ： v-owData. vowData 
is the ImagcDa-ta obje^-t tha-t wcVc usmg -to dv»aw pixels 

rnxo a V-OW o4 - the ^a^vas. So, whch WC \rcsi 2 jC the ^hvas, 
we heed {x> the v-owData objc^ so i^ai \i is 

as -the hew width o-P the tavw/as. Chc^k 
七 he WW d\rciwRow ih Whdcllibjs "to see how Y/c use 
RowData -to dlraw pixels ih-to the ^hvas. 


Now we need to do one more thing: install resizeToWindow as a handler for 
the browser window’s resize event. Here’s how we do that: 


window.onresize = function() { 

resizeToWindow(); 


You’ll want to place this code in the init function of mandel. j s, just below the 
call to setUpGraphics. 


TV^'is todc joes 
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managing fractal generations 


The awal-rctcwtlvG coder 


There’s just one more thing, and we could let this one go, but the code just 
doesn’t seem correct without it. Think through this with us: you’ve got a bunch 
of workers happily working on their rows and all of the sudden the user has to 
go and click on the screen to zoom. Well isn’t that great, because the workers 
have been working hard on their rows, and now the user wants to go and change 
the entire image, making all that work useless. Even worse, the workers have no 
knowledge that the user has clicked, and they’re going to send back their results 
anyway. And far worse, the code in the main page is gladly going to receive and 
display that row! And not to get all doomsday and everything, but we’ve got 
exactly the same problem if the user resizes the window. 

Now, you’d probably never notice any of this because there aren’t that many 
workers, and the workers very quickly compute the same rows for the new image, 
overwriting the previous, incorrect rows. But hey, it just feels wrong. Not only 
that, it’s so easy to fix we just have to. 


Ko-tc -to £d*rto\r ： Afolo^ics -Pov 
little but, hey, 

-this y/cll 

•i 七 tdiY\ *to you … 


Of course we have a little confession to make: we knew this was coming, and you 
might remember a little variable we stuck in named generation. Remember, 
every time we restart our workers we increase the value of generation. Also 
remember the results object that comes back from the worker: every result has its 
“generation” as a property. So we can use generation to know if we’ve got a result 
from the current or the previous visualization. 


Let’s look at the code fix, and then we can talk about how it works; edit your 
processWork function in mandel. j s and add these two lines: 


function processWork(worker, workerResuits) { 


if (workerResults.generation == generation) { 


drawRow(workerResults); 




reassignWorker(worker) 




I^VcVc the 

v/oirkcv- s \rcsult -fco see i-f 
its gchc\ratioh ma-Uhcs the 

OhC- 

|*f i 七 does v/c dva>/ vow, o*tKcvv/isc 

i-t musi be old av\d i^ovc i*t- 


I 灼 ci-thcv dasc wc gei 七 he v/ovkcv 
-fco v\tyj y/ovk/ 


So all we’re doing here is checking to make sure the current generation we’re 
working on matches the generation of the result that comes back from the 
worker. If it does, great, then we need to draw the row. If it doesn’t, well that 
means it must be old, and so we just ignore it — it’s too bad our worker wasted 
its time on it, but we don’t want to draw an old row from the previous image on 
the screen. 

So, really, that’s it, we promise, it’s time to make sure you have the changes 
above typed in, and get ready for... 
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putting javascript to work 


Time for the final test drive ! 琢 


Create HTML 
0^ E Cope 

0^ Create workers 



Start the workers 
[yf Implement the workers 
Process the results 
sr User interaction code 


That’s it! You should be ready to go with all your code. 
Load the fractal. html file into your browser and see 
your workers going to work. This version should be faster 
and more responsive than the original, single-threaded 
version; if you’ve got more than one core on your 
computer, then it will be a lot faster. 


Fractal Explorer 


^rsr) 




Have fun... zoom in... explore. Let us know if you find 
any undiscovered “country” in the Mandelbrot Set (tweet 
your screenshots to #h£html5 if you want!). 


Ckk, ZjOOW\ 


Resize youV" s£.V"CCir\ "to 
sVia\>C OV- SIZ^ Y\OVjf 




LL!JT 
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m THE LABORATORY 


If you’re writing high performance code you’ll 
want to check out how the number of workers 
can impact your app’s runtime. 

To do that, you can use the task monitor on 
either OS X or Windows. If we go back to our 
original version (the single-threaded one at r-' 




IIII 


We have eight cores in our machine, and so 
in the Fractal Explorer with Web Workers, 
we’re setting the number of workers to match 
that, with numberOfWorkers = 8 . And yOU 
can see in our activity monitor, all 8 cores are 
being used to the max. 



What do you think will happen if we set the 
number of workers to 2, or 4, or 16, or 32? Or 
something in between? 


Give it a try on your machine and see what 
values work best for you. 




0u\r with eight Cores. Ot\C 

toYt ,s W 乂 cd out 3 hd domfutc 
ah y hvdd The othc\r seveh avc doiha 

noth mg "to help. 


Kov/ ouv* ei # 七 
doves av-c vcally 
v/ovk'm^ ii3v-d> 
ouv* 

domfu*ta*tior> is 
1/VAV -fas*tcv. 



n 
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putting javascript to work 


STAKE YOUR CLAIM! 



Name your new territory ： 


you are here 
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more worker api functionality 



Tcrtnlnatc a warmer 


Handle errors In 

What happens if something goes terribly wrong in a worker? How can 
you debug it? Use the onerror handler to catch any errors and also get 
debugging information, like this: 

worker.onerror = function(error) { 

document.getElementByld("output").innerHTML = 

"There was an error in " + error.filename + 
"at line number " + error.lineno + 

M : M + error.message; 


You? created workers to do a task, the task is done, and you want to ^et 
rid of all the workers (they do take up valuable memory in the browser) 
You can terminate a worker from the code in your main page like this: 

worker.terminate(); 

If the worker happens to still be running, the worker script will abort 

80 USewith caution. And once youVe terminated a worker you can 5 t 
reuse it; you’ll have to create a new one. 

You can also have a worker stop itself by calling close () ; (from 
inside the worker). 
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putting javascript to work 


Tise a J§0]{p request 

You can，t insert new 〈 script 〉 elements to make JSONP requests from workers, 
but you can use importScripts to make JSONP requests, like this. 

function makeServerRequest() { 

importScripts("http://SomeServer•com?callback=handleRequest") 

Rcmcmbcv you\r JSONP? Ulude yo 砍 
乙 allbwk the URL n ucvy, 

ahd i-t will be called with ihe 
results passed ih-to the V-CSpOhSC 
pa\rarhctc\r. 


function handleRequest(response) 
postMessage(response); 

} 

makeServerRequest(); 


Ifee seflntem] In y 礎 御如 rs 


You might have missed this (it went by fast, we used it in only one example), but you can use 
setlnterval (and setTimeout) in your workers to do the same task repeatedly. For instance you 
could update the quotes worker (quote.js) to post a random quote every 3 seconds, like this: 


var quotes = ["I hope life isn't a joke, because I don't get it. M , 

"There is a light at the end of every tunnel...just pray it's not a 
"Do you believe in love at first sight or should I walk by again?"] 
function postAQuote() { 

var index = Math. floor (Math. random () * quotes . length) ; ^ /Vjovc 七 hesc *bwo Imcs 3 

postMessage(quotes[index]); 


;? Move 七 two Imcs \r 


postAQuote(); 

setlnterval(postAQuote, 3000); 


… dall pos-t/\^uoic -to send a <\uo-tc v-igh-t away, and 七 he 灼 
srt a 灼 m-tev-val -to send rwovc ^uo-tes, cvcv-y ? sedo^ds. 






If your worker needs help with its task, it can create its own workers. Say you’re giving your 
worker regions of an image to work on, the worker could decide that if a region is bigger 
than some size, it will split it up among its own subworkers. 

A worker creates subworkers just like the code in your page creates a worker, with: 

var worker = new Worker("subworker.j s M ); 

Remember that subworkers, just like workers, are fairly heavy-weight: they take up memory 
and are run as separate threads. So, be cautious about how many subworkers you create. 


— 




train !'▼, 
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review of web workers 


BULLET POINTS - 

■ Without Web Workers, JavaScript is single- 
threaded, meaning it can do only one thing at a 
time. 

■ If you give a JavaScript program too much to do, 
you might get the slow script dialog. 

■ Web Workers handle tasks on a separate thread so 
your main JavaScript code can continue to run and 
your Ul remains responsive. 

■ The code for a Web Worker is in a separate file from 
your page’s code. 

■ Web Workers don’t have access to any of the 
functions in the code in your page or the DOM. 

■ The code in your page and the Web Worker 
communicate via messages. 

■ To send a message to a worker, use postMessage. 

■ You can send strings and objects to a worker via 
postMessage. You can’t send functions to a worker. 

■ Receive messages back from workers by setting the 
worker’s onmessage property to a handler function. 

■ A worker receives messages from the code in your 
page by setting its onmessage property to a handler 
function. 

■ When a worker is ready to send back a result, it 
calls postMessage and passes the result as the 
argument. 

■ Worker results are encapsulated in an event object 
and placed in the data property. 


■ You can find out which worker sent the message 
using the event.target property. 

■ Messages are copied, not shared, between your 
main page code and the worker. 

■ You can use multiple workers for large computations 
that can be split into multiple tasks, such as 
computing a fractal visualization or ray tracing an 
image. 

■ Each worker runs in its own thread, so if your 
computer has a multicore processor, the workers 
are run in parallel, which increases the speed of the 
computation. 

■ You can terminate a worker by calling worker. 
terminate() from the code in your page. This will 
abort the worker script. A worker can also stop itself 
by calling close(). 

■ Workers also have an onerror property. You can set 
this to an error handling function that will be called if 
your worker has a script error. 

■ To include and use JavaScript libraries in your 
worker file, use importScripts. 

■ You can also use importScripts with JSONP. 
Implement the callback you pass in the URL query 
in the worker file. 

■ While workers do not have access to the DOM 
or functions in your main code, they can use 
XMLHttpRequest and Local Storage. 
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HTMLScposs 


Wow, Chapter 10; you’ve done it. Sit back, relax and 
make it stick by working the rest of your brain a 
little. Here’s your Chapter 10 crossword puzzle. 



Across 


Down 


4. You can pass_to workers using postMessage. 

8. Capability of a processor to do more than one thing at a 
time. 

9. The property used to register a handler to receive 
messages. 

11. Workers can’t access the_. 

12. Our first example used this game. 

13. The most famous fractal. 

14. /worker. 


1. Workers can use XMLHttpRequest and access 


2. How to import additional code into a worker. 

3. _of execution. 

5. How to abort a worker. 

6. Mandelbrot uses_numbers. 

7. How to create a Worker. 

10. The manager and workers communicate with these 


15. A lovely area of the Mandelbrot countryside is_ 

Valley. 

16. The guy who wrote the original version of Fractal Viewer. 


灼 。人 pjO^. JQ/V3M 5/A 人 
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exercise solutions 



BE fkBi 嘛總 §©lufi©n 

It’s 伽 e to pretend you’re tire browser 
evaluating JavaScript. 


window.onload = function() { 

var worker = new Worker("worker.j s M ); 
worker.onmessage = function(event) { 

alert("Worker says M + event.data); 


for (var i = 0; i < 5; i++) { 

worker.postMessage("ping") 


window.onload = function() { 

var worker = new Worker("worker.j s M ); 
worker. oinmessage = function (event) { 

alert("Worker says M + event.data); 


for(var i = 5; i > 0; i--) { 
worker.postMessage("pong") 


This sehds -five messages 
bo the v/o\rkc\r, v/Kidh vespohds 
v/i*th -five so v/c -five 

u IA/bvkcv- says pohf alcvts. 


This sehds -five pohj rv\essa^es 
to y/o\rkcy, v/hidh ignores 
them sihde -they av-Ch^ pih^s. 
bio ou*tfu*t. 


window.onload = function() { 

var worker = new Worker("worker.j s M ); 
worker.onmessage = function(event) { 

alert("Worker says '▼ + event.data); 
worker.postMessage("ping"); 

} 

worker.postMessage("ping"); 


.This.schcls .cacK .. 

.3 pohj domes badk A sfhrfs . 

loop o-P alcvts. 


window.onload = function() { 

var worker = new Worker("worker.j s M ); 
worker.onmessage = function(event) { 

alert("Worker says '▼ + event.data); 


setlnterval(pinger, 1000); 

function pinger() { 

worker.postMessage("ping"); 


This sch(ls ^ .cvcv：y 
scdoridj, so X a.pohg 
badk cadh i*t sc^ds 

•f . 
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— i^harpen your pencil_ 

While workers typically get their work orders through a message, they don’t 
have to. Check out this nice, compact way to get work done with workers and 
HTML. When you know what it does, describe it below: 


<!doctype html> 

<html lang= n en"> 

<head> 

<title>Quote</title> 

<meta charset= n utf-8 M > 

</head> 

<body> 

<p id=" quote "X/p> 

<script> 

var worker = new Worker( M quote.j s n ); 

worker.onmessage = function(event) { 

document.getElementByld("quote").innerHTML = event.data; 

} 

</script> 

</body> 

</html> 


<^uo*tch*trwl 






var quotes = [ M I hope life isn't a joke, because I don't get it. n , 

"There is a light at the end of every tunnel.... just pray it's not a train !，'， 
"Do you believe in love at first sight or should I walk by again?"]; 
var index = Math, floor (Math, random() * quotes. length); 


postMessage(quotes[index]); 

Youv dcsdv-iftio^ hcv-c ： 

..In. pwv.H.TML n .we. .have..a.scrjf-L.creates.a..wr.kc.v：,.y/Ki.cKThe..wy.kc.v：. ^qqscs .. 
a ^uoic \rahdornly quotes array；, ahd scryds -the ^uo-tc ^ the rwa'm. CoAt usmj .post/yicssagc ； 

The maih toAt yb -the <\uo*tc -from evcr\*t da*ta and adds i*t *to -the pay *m -the u ^uo*tc w <p> clcmch-t- 
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exercise solutions 



HTML5cross Solution 
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putting javascript to work 



f Wouldn’t it be dreamy if this 
were the end of the book? If 
there were no bullet points or 
puzzles or JavaScript listings or 
anything else? But thafs probably 
just a fantasy... 厂 




Congratulations! 

You made it to ike end. 

Of course, there’s still an appendix. 
And the index. 

And the colophon. 

And then there’s the web site... 
There’s no escape, really. 
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Appendix ： le¥t9V©rs 

♦The Top Ten Topics ♦ 

(we didn’t cover)^ 



We’ve covered a lot of ground, and you’re almost 

finished with this book. We’ll miss you, but before we let you go, we 
wouldn’t feel right about sending you out into the world without a little more 
preparation. We can’t possibly fit everything you’ll need to know into this 
relatively small chapter. Actually, we did originally include everything you need to 
know about HTML5 (not already covered by the other chapters), by reducing the 
type point size to .00004. It all fit, but nobody could read it. So, we threw most of 
it away, and kept the best bits for this Top Ten appendix. 

This really is the end of the book. Except for the index, of course (a must-read!). 


this is a new chapter 
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modernizr and audio 


# 1 Modcrwizr 


One thing you’ve probably noticed in this book, is that when you want to detect 
browser support for an API, there is no uniform way of doing so; in fact, almost 
every API is detected in a different way. For geolocation, for instance, we look 
for the geolocation object as a property of the navigator object, while for web 
storage we check to see if localStorage is defined in the window object, and 
for video we check to see if we can create a video element in DOM, and so on. 
Surely there’s a better way? 


Modernizr is an open source JavaScript library that provides a uniform 
interface for detecting browser support. Modernizer takes care of all the 
details of the different means of detection, even factoring in all the edge 
cases around older browsers. You’ll find the Modernizr home page at 
http :// www.modernizr.com/ 

Modernizr has gained a lot of developer support so you’ll see it used widely 
around the Web. We highly recommend it. 






^^nfarlsanop^.«our C 0 

bl ， ^ p " br,,y,ha,hrt9 «»~ 

w«bs^es 


Why use Modernizr? 


.咏 ".抑 
f **ot#c* losonfl. T 




9mkio6Hm, 


Latest 


news 




Download Modernizr 3 


G«tsumed wth Modernizr 

® pr*OC 的抑 铃 

一 ，—- 


* UM .41 




CU»»^t tKOWMT* *^6^ 


嫌 * 8 } 


Includmg Modernizr w your page 

To use Modernizr, you need to load the JavaScript library into 
your page. To do that you first visit the Modernizer site at 
http : // www.modernizr. com/download/, which allows you to custom 
configure a library that contains just the detection code you need (or you 
can always grab everything while you’re there). After you’ve done that, 
stash the library in a file of your choice and load it into your page (visit 
Modernizr’s web site for addition tutorials and documentation on best 
practices for doing this). 


Howto detect support 

Once you’ve got Modernizr installed, detecting HTML5 elements and 
JavaScript APIs gets a lot easier and more straightforward: 


Hcvc S sample <^f 

-fov ^colodatio^, v/cb s-tovay 扣 d 
video, dll m d 乙 or\sisterrt marme\r. 


Note- tAodcr^zy goes -fav- beyond 
simple API At{,tchoy\ also 

deied suppo\rt *Po\r CSS -fcaiuv-cs, 
video Codecs ^v\d oihev 
ihmjs. So, dhc^k i-t oui/ 




if (Modernizr.geolocation) { 

console.log("You have geo! n ); 

} 

if (Modernizr.localstorage) { 

console.log("You have web storage! n ); 

} 

if (Modernizr.video) { 

console.log("You have video!"); 
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leftovers 


Audio 


HTML5 gives you a standard way to play audio in your pages, 
without a plug-in, with the <audio> element: 


<audio src= n song.mp3 M id="boombox" controls 〉 

Sorry but audio is not supported in your browser 
</audio> 


Look -Pamiliav? Yes, audio 
supports sirwilav- -Puh^-tiohality as 
video (mms video, obviously). 


In addition to the <audio> element, there is also a corresponding 
Audio API that supports the methods you’d expect, like play, pause 
and load. If this sounds familiar, it should, because the audio API 
mirrors (where appropriate) the video API. Audio also supports many 
of the properties you saw in the video API, like sre, currentTime 
and volume. Here’s a bit of audio code to get a feel for using the API 
with an element in the page: 


var audioElement = 

document.getElementByld("boombox"); 

audioElement.volume = .5; 



今 rt a b> 七 he audio 

element loy/cv \is volume 

bo l/Z av\A siari flay’，. 


audioElement.play(); 


Also like video, each browser implements its own look and feel for 
player controls (which typically consist of a progress bar with play, 
pause and volume controls). 

Despite its simple functionality, the audio element and API give you 
lots of control. Just like we did with video, you can create interesting 
web experiences by hiding the controls and managing the audio 
playback in your code. And with HTML5, you can now do this 
without the overhead of having to use (and learn) a plug-in. 


A Standard for Audio Encodmgs 

Sadly, like video, there is no standard encoding for audio. Three 
formats are popular: mp3, wav and Ogg Vorbis. You’ll find that 
support for these formats varies across the browser landscape with 
different levels of support for the various formats in each browser 
(as of this writing, as of this writing, Chrome is the only browser 
that supports all three formats). 
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jQuery 


jftuery 


jQuery is a JavaScript library that is aimed at reducing and simplifying much of the 
JavaScript code and syntax that is needed to work with the DOM, use Ajax and add 
visual effects to your pages. jQuery is an enormously popular library that is widely 
used and expandable through its plug-in model. 

Now, there’s nothing you can do in jQuery that you can’t do with JavaScript (as we 
said, jQuery is just a JavaScript library), however it does have the power to reduce 
the amount of code you need to write. 


jQuery’s popularity speaks for itself, although it can take some getting used to if you () 
are new to it. Let’s check out a few things you can do in jQuery and we encourage 
you to take a closer look if you think it might be for you. 

For starters, remember all the window onload functions we wrote in this book? Like: 


Rcrwcrwbcv, is 
jus-t 3 -roV" us'm^ 

like 

v/c did m Chaptcv- ^>. 


A v/ov-km^ k^oy/lcdy of 
•Auevy is a ^ood skill *tV^csc 
ddys oy \ job -fvor\*t -fo\r 
ur\dcv-s*tar\dim^ ot^cv-s toAt- 


window.onload = function() { 

alert("the page is loaded! n ); 


Here’s the same thing using jQuery: 


$(document)•ready(function() { ^ 

alert("the page is loaded !”）； 

})； 


Jus 七 like ouv vcv-sio^, the 
is \rc3dy, invoke my 


Or you can shorten this even more, to: 


$(function() { 

alert("the page is 

})； 



loaded! '▼); 


Tins is dool ； bu*t as you dan sec 
•rt iakes a little used *to 

a*t -f iv-s*t. No v/ovvics, i*t becomes 
scdo^d-^d'tuvc -fast 


So what about getting elements from the DOM? That’s where jQuery shines. 

Let’s say you have an anchor in your page with an id of “buynow” and you 
want to assign a click handler to the click event on that element (like we’ve done 
a few times in this book). Here’s how you do that: 

_So what’s jo'mj oy\ hcv-c? Fiv-si wcVc up a 

广 ■tha't is called the pay is loaded- 

\4t%i y/cVc yabbm^ i\\t a^dKov W\i\\ 
d w buyv>oy/ w id (y>o*t*idc j^uevy uses 

CSS syy>*ta% (or sclcttm^ clc^c^is). 

i\\cv\ v/cVc tallmj a j^uevy method, didc, 
cm the vcsuli io set the emdide handlev. 


}); 

}); 


$(function() { 

.(^.uyno^.ciicMfunctionC) { 


alert( n I want to buy now! n ) 
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That’s really just the beginning; we can just as easily set the click handler on 
every anchor on the page: 


$(function() { 

$( M a").click(function() { 




To do all >wc *to do is 

use Mmc. 


alert("I want to buy now!") 


}) 



}) 


Compa\rc *this *to *bKc todt you’d 
v/v-i*tc *to do -this i-f wc v/cv-c usrnj 

JavaSd\rip*t v/i*thou*t j^Ucv-y. 


Or, we can do things that are much more complex: 

$(function() { 



Like all <li> elements 

av-c 匕 hildhren o*f *bhc 

y/i*th Sy\ id playlist 


}); 


$r#playlist > li M ) .addClass("favorite") ; add Ihcm {o the dass la 請 


"I 

V_ f dually 七 his is j 公败 y jus 七 gcUmg wa\rmcd up; j^uc^ry do 
tlimy mudh rwudh mo\rc sophisti^ted this. 


There’s a whole ’nother side of jQuery that allows you to do interesting interface 
transfomations on your elements, like this: 

$(function() { 


$("#specialoffer M ).toggle(function() { 

$(this).animate({ backgroundColor : 

"yellow' 

， }, 800); 

},function() { 

$(this).animate({ 

backgroundColor : 

"white" 

}, 300); 


})； 


TiVis -bogles *thc elcmcivt y/i*th By\ id o( spcdialo^-fcv* between 
be'm^ yellov/ ^00 pixels widq and white a^d ZOO pixels 
y/ide ； Bv\d dirtimd'tes *thc *bv-a^si*tio^ between *two s*ta*tcs. 


As you can see, there’s a lot you can do with j Query, and we haven’t even talked 
about how we can use j Query to talk to web services, or all the plug-ins that work 
with j Query. If you’re interested, the best thing you can do is point your browser to 
http : //j query. com/ and check out the tutorials and documentation there. 




Md, dhcdk oui Head Fiv-s-t j^uev-y -too/ 
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# 4 XHTML is dead, long live XHTML 

We were pretty tough on XHTML in this book, first with the “XHTML 
is dead” discussion, and then later with “JSON versus XML”. The truth 
is, when it comes to XHTML, it is only XHTML 2 and later that has 
died, and in fact, you can write your HTML5 using XHTML-style if you 
want to. Why would you want to? Well, you might need to validate or 
transform your documents as XML, or you might want to support XML 
technologies, like SVG (see #5), that work with HTML. 

Let’s look at a simple XHTML document and then step through the high 
points (we couldn’t possibly cover everything you need to know on this 
topic, as with all things XML; it gets complicated, fast). 


<!DOCTYPE html> 


Same dod-tyfc! 


<html xmlns="http : //www.w3.org/1999/xhtml"> 


This is )<ML, wc r\ttA 


<head> 

<title>You Rock!</title> 
<meta charset="UTF-8 M /> 
</head> 


/All have b> be v/cll -fov-med； Y\oit 

<^ / /> hcv-c -to dlosc *tK*is 士你⑼七. 


<body> 


<p>I'm kinda liking this XHTML!</p> 

<svg xmlns="http : //www.w3.org/2000/svg M > 

<rect stroke= M black M fill= n blue" x= M 45px" y= n 45px" 
width= "20Opx" height= "10Opx n stroke-width:'▼ 2 



/> 


WlcVc us'm^ £\/^ *to 

a *m*to ouv pay- 

Ci^ctk out ^ (m % 七 pay) 
-fov move oy \ s \/4 


</svg> 

</body> 

</html> 


V Wlc cav\ embed )<ML vi^vt m 七 he 

pay! K’mda tool 


Now here’s a few things you need to consider for your XHTML pages: 
Your page must be well formed XML. 


■ 


■ 


■ 


Your page should be served with the application/xhtml+xml 
MIME type, for this you’ll need to make sure your server is serving 
this type (either read up on this or contact your server administrator). 

Make sure and include the XHTML namespace in your <html> 
element (which we’ve done above). 


Clos'm^ all youv elements, quotes 
av^ouy>d values, valid Y\tsh^ 

of dr>d dll 七 


Like we said, with XML there’s a lot more to know and lots of things to 
watch out for. And, as always with XML, may the force be with you... 
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巧 SVfr 


Scalable Vector Graphics, or SVG, is another way — aside from canvas — of 
including graphics natively in your web pages. SVG has been around a while (since 
1999 or so) and is now supported in all the current versions of major browsers, 
including IE9 and later. 

Unlike canvas, which, as you know, is an element that allows you to draw pixels into 
a bitmap drawing surface in your page with JavaScript, SVG graphics are specified 
with XML. “XML?” you say? Yes, XML! You create elements that represent 
graphics, and then you can combine those elements together in complex ways to 
make graphic scenes. Let’s take a look at a very simple SVG example: 

WlcVc ^ttTAIL—s*tylc 

HTML5 because us*m^ £\/^> 

<! DOCTYPE html> v/iVidii is )<ML - based. 

<html xmlns="http : //www.w3.org/1999/xhtml n > 

<head> 

<title>SVG</title> 

<meta charset= n utf-8 n /> 

</head> WlcVc us'mj <svj> 

<bod y> / v-ijht m ouv- WT/V\U 

<div id=”svg"> ^ - s Slm? | c ： 乙。山 ms cml Y a 




<svg xmlns= n http : //www.w3.org/2000/svg n > 

<circle id="circle" 

cx= n 50 n cy= n 50 n r= n 20 M 
stroke= n #373737" stroke-width= M 2" ^ ... a stvokc that is Z pixels wide 
fill= M #7d7d7d M /> to\ortd dark yrCj … 


*»S located at ?os\ho^ 

扣 d a v-aduAS o\ 2 - 0 … 


</svg> 

</div> 

</body> 

</html> 


… is -filled with 3 medium gvey. 


SVG defines a variety of basic shapes, like circles, rectangles, polygons, lines, and so 
on. If you have more complex shapes to draw, you can also specify paths with SVG — of 
course, at that point things start getting more complex (as you already saw with paths in 
canvas). However, there are graphical editors that will let you draw a scene and export it 
as SVG, saving you the headache of figuring out all those paths yourself! 

What’s so great about SVG? Well, one nice aspect of SVG is that you can scale your 
graphics as big or small as you want and they don’t pixellate, like a jpeg or png image 
would if you scaled it. That makes them easy to reuse in different situations. And because 
SVG is specified with text, SVG files can be searched, indexed, scripted and compressed. 

We’ve barely scratched the surface of what you can do with SVG, so explore more if this 
topic interests you. 


You CBy\ yab this divtlc 
element jus*t like 
othev element -Pv-om 
■the POM by\A do stu-P-P 
with • 七 … -Pov ms*ta^dC 
you dould add a c\\ck 
handler -the 

divdlc^s -Pill attribute 
*to Vcd w the usev 
dlldks OY\ the divdlc- 
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# 6 Offline web apps 

If you’ve got a smartphone or tablet, you’re probably accessing the Web on the 
go, and with WiFi and cellular networks, you’re connected almost all the time. 
But what about those times when you’re not? Wouldn’t it be great if you could 
keep on using those great HTML5 web apps you’ve been building for yourself? 

Well, now you can. Offline web applications are supported by all modern 
desktop and mobile browsers (with one exception: IE). 

So how do you make your web application available offline? You create a cache 
manifest file that contains a list of all the files your app needs to work, and the 
browser will download all those files, and switch to the local files if and when 
your device goes offline. To tell your web page that it has a manifest file, you 
simply add the filename of the cache manifest file to your <html> tag, like this: 

<html manifest= n notetoself.manifest n > 


Here’s what the notetoself.manifest file contains: 


CACHE MANIFEST - 

CACHE : 

notetoself.html 
notetoself.css 
notetoself.js 



Evcvy 七 -f ile 

must s 七 av ■七 -this. 

Lis*t all -files you wa^*b *to c^c\\t 
\ y \ CACHE tss, 

javas^\rip*b, images, d 


This file says: when you visit the web page that points to this file, download 
all the files listed in the CACHE section of the file. You can also add two other 
sections to the file, FALLBACK and NETWORK. FALLBACK specifies what file to 
use if you try to access a file that isn’t cached, and NETWORK specifies files that 
should never be cached (for example, visit tracking resources). 



W\{\\ of-fl'mc v/cb you 
use youv -favov*i*tc v/cb apps 
youVc y\o{, Comcdcd! 


Now, before you run off to go play with this, you need to know two things: first ， 
you need to make sure your web server is set up to serve the mime type for cache 
manifest files correctly (just like we had to do for video files in Chapter 8). For 
example, on an Apache server, add this line to your . htaccess file at the top 
level of your web directory: 

AddType text/cache-manifest .manifest 


The other thing you need to know is that testing offline web applications is 
tricky! We recommend checking out a good reference on the topic and reading 
the HTML5 offline web applications specification. 

Once you’ve got basic caching working, you can use JavaScript to be notified 
of cache events, such as when a cache manifest file is updated and the status 
of the cache. To be notified of events, you add event handlers to the window. 
applicationCache object, like this: 

window.applicationCache.addEventListener("error", errorHandler, false); 



cv-v-ov-ttar\dlcv- *to 
be wbi-f ied 
ihcrcs am error 
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# 7 Web Sockets 


We looked at two ways of communicating in this book: XMLHttpRequest 
and JSONP. In both cases we used a request/response model based on 
HTTP. That is, we used the browser to make a request for the initial 
web page, CSS and JavaScript, and each time we needed something 
else, we made another request using XMLHttpRequest or JSONP. We 
even made requests when there was no new data for us, which happened 
sometimes in the Mighty Gumball example. 

Web Sockets is a new API that allows you to keep an open connection 
with a web service so that any time new data is available the service can 
just send it to you (and your code can be notified). Think of it like an 
open phone-line between you and the service. 

Here’s a high-level overview of how you use it: first, to create a web 
socket we use the web socket constructor: 

var socket = new WebSocket( M ws://yourdomain/yourservice"); 

You can be notified as soon as the socket is open with the open event, 
which you can assign a handler for: 


socket.onopen = function(){ 


alert("Your socket is now open with the web service"); 


You can send a message to the web service with the postMessage 
method: 

socket.postMessage("player moved right"); 


And to receive messages you register another handler, like this: 

socket.onmessage = function(event) { 

alert("From socket: " + event.data); 




No 七 Me *tiVis URL uses 
*tKc y/s pvo*totol, v>o*t 

A^d \rcrwcrwbcv- you oy 
sor^cohC else is 0oih0 
*t° have "to wv-itc the 
s cv-vcv- todt so you have 
sorncthihg -fco talk -fco/ 

ttcv-c v/c supply B 
ha^dlcv- is called 
vj\\cy\ sodke 七 is -fully 
opened \rcady -fo\r 

dow\mu^da*tioir\. 


__ wcVc seeding 

scv-vcv- d s-tv-mj ； b*mav-y 
is bu*t y\o{, widely 

suppo\rtcd yet 

By v-ejis-tev-mg a y/c v-c^civc dll 

messages ； vjW\CM m -the 

dd*td p\ropc\rty. 


There’s a little more to it than this, of course, and you’ll want to check 
out some tutorials online, but there’s not much more to the API. This API 
has been lagging behind some of the other HTML5 API development, so 
check out the latest browser compatibility guides before you undertake a 
major project. 






more canvas api 


# 8 More canvas API 


We had fun with the canvas in Chapter 7, building our TweetShirt startup. But there 
are lots of other fun canvas-related things you can do and we wanted to touch on a 
few more of them here. 


We mentioned very briefly that you can save and restore the canvas context. Why 
would you want to do that? Let’s say you’ve set some properties of the context, like the 
fillStyle, strokeStyle, lineWidth and so on. And you want to then temporarily 
change those values to do one thing, like draw a shape, but not have to reset them 
all to get back to the property values you had previously. You can use the save and 

restore methods to do that: , 

^ v lA/csctufa bu^V) ok m the 

context, fillstyle = "lightblue"; < a^d do some dvay/mj. 


context.save(); 

context.fillstyle = n rgba(50, 50, 


50, .5 )”； ^ 


Moyj, y/c save AH 七 hose fvofev ■ 七 ies 

avc saved sa^ely-^fe 从 ⑽… 


context.fillRect(0, 
context.restore(); 


0, 


100, 100); 



... by\A them all badk *to whcv-c they 

y/c\rc v/hc 灼 wc saved -them simply by 匕 all’n^ the 
v-cs-tov-c method •’ A*t this all ouv p\ropcv-*tics 

av-c what they wcv-c bc-fov-c wc saved- 


These methods come in particularly handy when you want to translate or rotate the 
canvas to draw something and then put it back to its default position. What do the 
translate and rotate methods do? Let’s take a look... 


#4 0 0 Look What I Drew 

I + 0 http://local host/HTMLS/Canvas C (pc 


WeVe got a 400x400 canvas 
in the page. If we draw a black 



rectangle at x=0 y y=0, it is drawn in 
the top left corner, like you d expect. 

context•fillRect(0, 0, 100, 100); 


Now, well pick up the canvas and 
move it 200 pixels to the right, and 
200 pixels down. If we draw another 
rectangle at x=0, y=0, the rectangle is 
drawn 200 pixels right and down from the 
other rectangle. We've just translated 


the canvas. 


] [ context.translate(200, 200); 

context•fillRect(0, 0, 100, 100); 

I I 
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What if we rotate the canvas before 
we draw the rectangle? The canvas 
rotates around its top left corner (by 
default), and since we just moved the top 
left corner to 200, 200, thafs the position 
where the canvas rotates. 

context.translate(200, 200); 
context.rotate(degreesToRadians(36)); 
context•fillRect(0, 0, 100, 100); 



you translate ov rotate 
f.d^vds, its moved oy\ a y»d 仏 a*ts 
positioned v*cspct*t "to "top 

tVic brov/sev v/mdov/. 

you vc pos"rtioir\cdi youV" Qrwas \aS\y\<^ 
CSS, -LViosc values arc takers m-to 
a 乙乙 ouht T\rV >*tf 


Now let’s put all that together! You can use the translate and rotate methods 
together to create some interesting effects. 


var canvas = document.getElementByld("canvas M ); 


var context = canvas.getContext("2d"); 

var degrees = 36; WicVc savm^ *tV^C so >/C 

^ cas\l 7 士 c vt 圬 vb 一 1 

yc\A position a*f W ^ ^ 

context.save(); 

context, translate (200, 200) ^ Va^slatc ouv da^vas by 2-00, 100. 

context.fillStyle = "rgba(50 , 50, 50, .5) n ; 

WlcVc d\raw*mg 

L \0 v-c^*ta^glcs by 


for (var i = 0; i < 360/degrees; i++) { 

context•fillRect(0, 0, 100, 100); 
context.rotate(degreesToRadians(degrees)); 

y Novj ouv- da^vas is bddk d*t 
context, restore (); l • 心。叫 ma | position! 


*thc 匕 SirWds 
dcyccs bc-fo\rc 

d\raw'm^ a \rc^*ta^glc 
a*t O, 0 tiw'C 

•tWoujh *thc loop. 


Combine these simple transformations with other, even more powerful (and 
complex!) methods like compositing and transforms, and the possibilities for 
creating graphic art with canvas are endless. 


\\trts *tlic vcsult 
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# 9 Selectors API 


You already know how to select elements from the DOM using document. getElementByld; 
we’ve used it throughout this book as a way to get HTML and JavaScript working together. 
You’ve also seen how to use document. getElementsByTagName (this method returns 
an array of all elements that match a tag), and there’s even a getElementsByClassName 
method (returning, you guessed it, all elements that are in a given class). 


With HTML5, we now have a new way of selecting elements from the DOM, inspired by 
jQuery. You can now use the same selectors you use in CSS to select elements for styling in 
your JavaScript to select elements from DOM with the document. query Selector method. 

Let’s say we have this simple HTML: 


<!doctype html> 
<html lang= M en M > 
<head> 


<title>Query selectors</title> 
<meta charset="utf-8 M > 

</head> 

<body> 



Take a tlosc look at strutWc tW.s 
HTML. WcVc -to use sclcttov-s f[Y\ 

•to select clcmcirrb i\\t fay. 


<div class= M content"> 

<p id= n avatar" class= n level5 n >Gorilla</p> 
<p id= n color n >Purple</p> ^ 

</div> 卜 ~ 

</body> 


3 0 七 a <div> -the dldss 

<p> elements, eadh \wi-th 
■Uieiv ovm ids, a 灼 d erne the dlass w lcvcl^ w . 


</html> 


Now, let’s use the selectors API to ask for the “avatar” <p> element: 

document. querySelector ( M #avatar") ; 4 ^^ 


That’s essentially the same thing as document. getElementld ("avatar" ). Now 
let’s use the element’s class to select it: 

wc v-c usrna -the the 

document. querySelector ( n p • level5 ") ; ^ ^lass -fco sclcdt it 

We can also select a <p> element that is a child of the <div> element, like this: 


document.querySelector( n div>p n ); 


or even like this: 

document. querySelector ( n . content>p n ); 


— - y/cVc usm^ d tiiild sclcd'tov* "to sclcd*t 3 

<Y> elemerrt 七 ha 七 is a cM\\d <div>. I 七 

sclcd*U ov\t, by default 


And, if what we really want is all the <p> elements in the <div>, we can use the 
other method in the selectors API, query Selector All: 


document. querySelectorAll ( M div>p n ) 


^ Nov/ v/c get all the tW\\d <f> 

o-P the <d'i\f>! 


querySelectorAll returns an array of elements, just like getElementsByTagName. 
And that’s it! Those are the only two methods in the API. The selectors API is small, 
but adds powerful new functionality for selecting elements. 
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# 10 Put there's even more! 

Okay, we really wanted to keep it to the ten things we didn’t tell you, but it 
looks like we’ve got a ways to go, and instead of standing between you and 
your reading of the index, we’re going to give you a bunch more in a single 
page. Here they are (keep in mind some of these areas are still evolving, but 
we knew you’d want to know about them for future reference): 

Indexed database API and Web SQL 

If you’re looking for something more industrial than the Web Storage API to 
store your data locally, keep an eye on the web database space. Two competing 
visions are out there right now: Web SQL and IndexedDB. Ironically, Web 
SQL is the more widely supported of the two, but was recently deprecated 
by the standards bodies (meaning they don’t recommend adopting it as a 
standard, and you probably shouldn’t base your next startup on it). IndexedDB, 
on the other hand, isn’t widely implemented yet, but has support from Google 
and Firefox. IndexedDB provides fast access to a large collection of indexed 
data, while Web SQL is a small SQL engine that runs in the browser. Keep an 
eye out for where these technologies go; they are changing fast! 

I?rag and Prop 

Web developers have been doing drag and drop with jQuery for a while now, and now this 
functionality is native in HTML5. With the HTML5 Drag and Drop API, you specify something to 
drag, where you can drop it, and Java Script handlers to be notified of the various events that occur 
while dragging and dropping. To make an element draggable, just set the draggable attribute 
to true. Just about any element can be dragged: images, lists, paragraphs, and so on. You can 
customize the dragging behavior by listening for events like dragstart and dragend and even 
change the style of an element to look like you want while it’s being dragged. You can send along a 
little bit of data with your dragged element using the dataTransfer property; access this through 
the event object to know if, say, the element is being moved or copied. As you can see, there are 
lots of great opportunities to build new UI interactions with HTML5 Drag and Drop. 

Cross-document Messaging 

In chapter 6, we used a communication pattern known as JSONP to get around the cross-domain 
communication issues with XMLHttpRequest. There’s another way you can communicate between 
documents — even documents in different domains. The Gross-document Messaging API specifies that 
you can post a message to a document you’ve loaded using an if rame element. This document could 
even be at a different domain! Now, you wouldn’t want to load just any document into your if rame; 
you’ll want to make sure it’s from a domain you trust and set it up to receive your messages. But the 
upshot is that this is a way to get messages back and forth between two HTML documents. 

And we could go ow … 

The exciting thing about HTML5 is that there are so many new capabilities being developed at a fairly 
fast pace; there’s even more we could put on the this page, but we’re out of room. So keep up to date 
with us on the Web at http : // wickedlysmart. com for all the latest developments in HTML5! 



you are here ► 


543 



html5 guide to new construction 


I can't believe the book is almost over. 
Before you go, weve got a little parting gift 
for you from the City of Webville; ifs the guide 
to the HTML5 elements (and whafs new in CSS3) 
that we promised you. Isn’t Webville great?! 
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The HTML5 &uide to New Cowstructiow 

Here in Webville we’ve recently made a few additions to our building codes 
and we’ve prepared a handy guide to any new construction you might be 
considering. In particular we’ve added a bunch of new new semantic elements 
that give you even more power to architect your pages. Now, our guide isn’t 
exhaustive; rather, our goal here is to give you, the experienced builder, enough 
to be familiar with the new HTML5 elements and CSS3 properties so you 
can use them in the web applications you’re learning how to build in this book 
when you’re ready. So if you need a quick tutorial on the semantic additions to 
HTML5, take one — they’re FREE (for a limited time only). 



Xlie HTML5 Guide to 
New Construction 

City of WebviWe 


§ 
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Webville Guide to HTML5 Semantic Elements 


Here in Webville we’ve made some recent changes to our building code and we’ve 
prepared a handy guide for all your new construction. If you’ve been using <div>s for 
common construction like headers, navigation, footers, and blog articles, then we have 
some new building blocks for you. So make sure you’re up to code. 



<section> 

A <section> is a “generic document”. You could use 
<section> to mark up, oh, say a Guide to HTML. Or to 
enclose the HTML for a game. A <section> is not a generic 
container—that’s <div>’s job. And remember, use <div> if 
you’re just grouping elements together for styling purposes. 

<article> 

An <article> is a self-contained chunk of content that you 
might want to share with another page or web site (or even 
your dog). Perfect for blog posts and news articles. 


<header> 

<header> is for the tops of elements like <section> and 
<article>. You might also use <header> at the top of the 
body to create the main header for your page. 


<footer> 

<footer> is for the bottoms of things. Things like 
<section>s, <article>s and <div>s. You might think you’re 
only allowed one on a page; in fact, you can use it 
whenever you need footer content on a section of your 
page (like a bio or references for an article). 


<hgroup> 

This one can be tricky. Unlike <header>, which can contain 
any elements related to a header, <hgroup> is specifically 
for grouping headings (<h1>...<h6>) together inside a 
<header>. Good for outlines. 
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<nav> 

<nav> is navigation and for links, of course. But not just 
any links: use <nav> when you have a group of links, like 
navigation for your site, or a blogroll. Don’t use it for single 
links in paragraphs. 


<aside> 

<aside> is handy for all kinds of things that are chunks of 
content outside the main flow of your page, like a sidebar, 
a pull quote, or an after-thought. 





<time> 

Finally! Ifs about time. You can mark up your times with 
<time>. No need to rush; take your time and do it right— 
you’ll need to study up a bit on the valid formats for <time>. 



〈 progress 〉 

Almost done? Yes, we’re making progress through these 
HTML5 elements...<progress> represents how far along 
you are in completing a task. Use with a little CSS and 
JavaScript for some nice effects. 



<abbr> 

Hey Mr., make sure you use an abbreviation for that long 
word! Great for search, because search engines aren’t 
always as smart about abbreviations as we are. 



<mark> 

Use <mark> to mark words, for highlighting or editing, say. 
A good one to use with search engine results. 
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css3 properties 


Adding style to your new cowstructiow with CSS? 


Webville Guide to CSS3 Properties 

Now that you’ve got your new building blocks into place ， it’s time to think about some 
interior design. You’ll want to make all your new construction look good, right? 


New properties 



There are quite a few new properties in CSS3, many of which do what web 
page authors have been doing for years with various contortions of HTML, 
images, and JavaScript. Examples: 

^ - Makes t\t^i ^0% 

opacity: 0.5; 

v - - Creates d y-ou\r\dcd a 

border-radius : 6px; ^ on 

box-shadow: 5 P x 5 P x 10px #373737; A shadow Ug, ^ high, a blu. 

New layouts - o-P /0 P x a dark ^olo^. 



There are a couple of powerful new ways to lay out your page with CSS that 
go beyond positioning and are much easier to use. Examples: 


display : table; 
display: table-cell; 

display : flexbox; 


flex-order: 1; f 


New animations 


TWis aivcs you a tabic layout 
▲uUk HTML tables. 

IVith -Plcxbox you have gv-catc\r ^ohtv-ol 
ovcir how -the b\rowscy flows boxes, like 
<div>s oy \{ x > the pay. 



With animations, you can animate between property values. For instance 
you can make something disappear by transitioning the opacity from opaque 


to translucent: 

kr 

transition : opacity 0.5s ease-in-out; 

opacity: 0; By settmj opacity *to O, say oy\ 

^ -- a hovcv v/c cav\ trcaic a 

, disappear/VCcIPPCdV" dhimd 七 ioyv 

New selectors 

There are a whole slew of new selectors, including nth-child, which lets you 
target specific child elements enclosed in an element. Finally, you can set the 
background color of alternating rows in a list without going crazy. 


spct'il'ics a fv-ofcvtY *to 
七 va 灼 sVbo 灼 m*to out o-r, 

(m 七 Wis cast o^at'i-by), ^ 
|o^5 bo take -to do 

and easur^ 

so iVs yadual 


ul li : nth-child(2n) { color : gray; } 


TKis means ： select cvevy 
o*tKcv list i*tcm 扣 dl set "tKc 
bddk^VOUir\d dolov *to yay. 
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Symbols 

$ (dollar sign) 

S() (jQuery function) 534 

beginning JavaScript variable names 40, 42 

2D drawing context, canvas 292. See also Canvas API; 
context, canvas 

defined 293 
getting 302 

， (comma), separating object properties 132 

{ } (curly braces) 

enclosing code blocks 26 
enclosing object properties 132 

.(dot) operator 

accessing object properties 133, 134 
invoking methods 151 

/ / (forward slashes), beginning comments in JavaScript 
39 

+ (plus sign) 

addition operator or string concatenation operator 45 
string concatenation operator 26 

“ (quotation marks, double) 

around Java Script property values 133, 308 
around codecs parameter of <source> element 359 
denoting empty strings 26, 95, 108 
surrounding character strings in JavaScript 39 

;(semicolon), ending statements in JavaScript 39 
j (square brackets) 

accessing and enumerating object properties 133, 160 
associative arrays 424 
creating and indexing arrays 67 
using with localStorage 424 

_ (underscore), beginning JavaScript variable names 40, 
42 


A 

AAG Audio 357 

<abbr> (abbreviation) element 547 

accuracy, location information 191 
enableHighAccuracy option 198 
accuracy property, coordinates object 190 

addEventListener method 367 
calling error handler 406 
listener for ended video event 386 
popping up play button after video ends 386 

addition operator (+) 45 

addMarker function (example) 186 

addStickyToDOM function (example) 430, 432, 440 
passing key as well as value each time it’s called 450 
using sticky object instead of string 455 

Adobe Premiere Elements 360 

Adobe’s HTTP Dynamic Streaming 404 

altitude and altitudeAccuracy properties, coordinates 
object 190, 197 

angles 

measured in degrees, converting to radians 317 
startAngle and endAngle parameters of arc method 
315 

animations, new, in CSS3 548 

anonymous functions 128 
using 129 
Apache 

telling to serve video files with certain file extensions 
371 

using on Mac, PC, and Linux 231 
APIs (Application Programming Interfaces) 15, 31 
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appendGhild method 
element object 158 

in addStickyToDOM function (example) 450 
ul object method 101 

Apple’s HTTP Live Streaming 404 
application/xhtml+xml MIME type 536 

arc method, canvas context 313 

direction, startAngle, and endAngle parameters 315 
drawing circles for t-shirt design app 319 
interpreting call to, and sketching out all parameters 
on circle 317,343 
using to trace a given path 316 
x, y, and radius parameters 314 

arguments, function 120 
objects as 136 

passing to parameters 122， 162 
arrays 67 

adding items 68 

creating and assigning to a variable 67 
filling list items from (example) 69 
getting value of items in 68, 303 
length of 68 

localStorage object as associative array 424 
of objects 134, 457 
removing items from 73, 448 
solving problems in local storage 439 
storing in local storage 440, 467 
using to store multiple values 75 
video playlist 365 
of workers 508 

<article> element 546 

<aside> element 547 

associative arrays 424 

attributes, getting and setting 158 
setting attribute on element 379 
setting id attribute of sticky note 450 

audio 16, 533 

AAG and Vorbis encodings 357 
codecs 358 

encodings in video files 356 
formats 357, 533 

methods and properties of audio API 533 
<audio> element 533 

autoplay attribute, <video> element 353, 354 


B 

background color 

canvas, filling before drawing new squares 306, 342 
setting backgroundGolor property for sticky note 455 
setting for alternating rows in a list 548 

background tasks 95 

beginPath method, canvas context 311, 319 
“bitmap” drawing, on canvas 336 
black and white, converting pixels to 399 
<body> elements, adding <script> elements to 53 

booleans 40 

boolean expressions 43 

conditional tests in for and while statements 47, 49 
using to make decisions with JavaScript 49 
true and false values 39 

border-radius property 548 

box-shadow property 548 

<br> element 26 

browsers 

audio encodings support 533 
background tasks 95 

caching and repeatedJSONP requests 272, 277 
controls for HTML video 355 
creating workers 478 

cross-browser compatibility of HTML pages 20 
detecting geolocation support 174 
detecting support for canvas, in code 293 
detecting support, using Modernizr library 532 
developer tools to manage local storage 434 
exceeding local storage capacity 458 
executing code only after page is fully loaded 64 
fallbacks for supported video 362 
fitting canvas to window in Fractal Viewer (example) 
517 

history of browser storage 414—416 
loading and displaying HTML documents 14 
local storage capacity 420 

localStorage not working when loading from file 422 
methods of determining location 170 
mobile devices, canvas support 335 
not supporting <canvas>, displaying text contained in 
it 295 

not supporting HTML5 features, providing alternative 
for 19 
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parsing HTML and building DOM from it 57, 81 
running code stored in local storage 104 
same origin policy on video 408 
security policy 244 
storing data using localStorage 108 
support for HTML5 17 
support for offline web apps 538 
support for Web Workers 482 
support for XMLHttpRequest, onload property 239 
testing for support of video formats for video loaded 
by code 368 

video encodings supported 358 
video file formats 352 

video support, determining level of 361, 411 
Web Storage support 422 

buttons 

button object, onclick property 154 
clearing local storage 435 
click handlers for video booth, JavaScript code 
377—379 

controlling effects in video booth 390, 391 
CSS styling for video booth 381 
handling click event 89, 92, 102, 108 
HTML for video booth buttons 375 
implementing for video booth 384—386 
JavaScript factory code for video booth 376 
preview button for t-shirt design application 302 
selecting between test videos 387 
sticky note application 431 

create Sticky handler 432 
toggle or radio buttons 380 
watching position and clearing the watch 193 

bwcartoon video filter 400, 410 

c 

cache, browser 272, 277 

cache manifest file for offline web apps 538 

callbacks 254, 277 

getting tweets sent from Twitter 322 

camel case in multi-word variable names 42 

canPlayType method, video object 368-374 
"maybe" response, but playback fails 371 
using to determine video format for your browser 369 


Canvas API 16, 281-348, 540 
adding <canvas> element to web page 286 
background color of canvas, filling before drawing 
new squares 306 
BE the Browser exercise 

interpreting call to arc method 317, 343 
browsers not having support for canvas 295 
call to fillBackgroundGolor function 307 
<canvas> element vs. SVG graphics 537 
click handler for canvas in Fractal Viewer (example) 
515 

Code Magnets exercise 327, 345 
Crossword Puzzle 340, 346 
drawlmage method 333 
drawing a smiley face 321， 344 
drawing on the canvas 290—294 
circles 309—317 

random circles for t-shirt design app 318 
using paths to draw shapes with lines 311 

writing drawSquare function to draw squares 304 
drawing text 325—332, 345 
exercise, drawBird function 334, 346 
exercise, using path to draw lines and fill shape with 
color 312, 343 

fillStyle property of canvas context 308 
fitting canvas to browser window in Fractal Viewer 
(example) 517 

form for t-shirt application interface 298 
implementing a scratch buffer 395—398 
making canvas visible, adding border using CSS 288 
No Dumb Questions 289, 293, 308, 335 
Pseudo-code Magnets exercise 303, 342 
reviewing t-shirt design application implementation 
296 

saving and restoring canvas context 540 
and separation of presentation and content 326 
Sharpen Your Pencil exercise 

displaying only new squares in preview 306, 342 
drawText function 330 
summary of important points 338 
text methods and properties 328 
translating or rotating canvas 540 
t-shirt design web application 282 
using as display surface for video 408 
using <canvas > element for Fractal Viewer (example) 
503, 514 

video processing with 392—394 
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<canvas > element 

adding border using CSS 288 
adding to web page 286 

cubicle conversation about the <canvas> element 285 
partnership with 〈 video> element 339, 388 

case sensitivity in JavaScript 41 

cell phone triangulation 169 

chaining 

objects and properties, movie example 141 
objects, properties, and methods, geolocation 175 

character encoding, UTF-8 9 

character strings, quoting in JavaScript 39 

childElementGount property, element object 158 

child elements 

adding to parent element in the DOM 108 
in DOM tree structure 100 
nth-child selector 548 
replaceGhild method 270 

Chrome 20. See also browsers 
HTML5 support 18 
Ogg/Theora video 357 

security restrictions on video+canvas operations 371 
security restrictions on Web Workers 482 
.webm video files 352 
WebM/VP8 video 357 

cinema application (example) 138 

adding behavior to Movie object with a method 
143-145 

creating movie objects 139 

implementing getNextShowing function 140 

Movie constructor function 150, 152 

using Movie constructor to create Movie objects 153 

using this keyword to reference Movie object 145 

circles, drawing on canvas 309—317, 338 
arc method 314 

converting angle measurement in degrees to radians 
317 

creating paths 311-313 
class attribute, <anchor> element 379 
class, selecting element by 542 
clearlnterval method 271 
clear method, localStorage object 435 


clearStorage function (example) 435 
clear Watch method 190 
click events 

adding handler in canvas application 302, 347 
adding handler in geolocation application 194 
adding handlers for sticky notes application 431, 435, 
450 

assigning handler to element using jQuery 534 
handler alerting user of button clicks 92 
handlers for video application 376 
handling for Add Song button 89 
handling for buttons 108 

closeO method, worker object 522, 524 

closePath method, canvas context 312 

codecs 

AAG audio 357 

codecs parameter of <source> element’s type attri¬ 
bute 359 
defined 358 
H.264 video 357 
main types of 356 
Theora video 357 
Vorbis audio 357 
VP8 video 357 

code reuse 

functions and 119 
methods and 146 

colors 

choosing for sticky notes, in stickies application 
453-456 

fillBackgroundGolor function for canvas context 307 
fillRect method vs. fillStyle property, canvas context 
308 

setting background color of alternating rows in lists 
548 

setting for fillStyle property of canvas context 304, 
308 

specifying in canvas 338 

comma (，)，separating object properties 132 

comments in JavaScript 39 

computeDistance function (example) 180 

concatenating strings. See also + (plus sign), under 
Symbols 

creating marketing slogans (example) 72 
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conditionals 37 

testing in while and for loops 47 
while loops 46 

constructors 1 46， 160 
built-in 151 
creating 147 

LatLong constructor from Google Maps 183 
Map constructor from Google Maps 184 
Movie constructor function 150, 152 
using 148 

using Movie constructor to create Movie objects 153 
Web Socket 539 

containers 356 
defined 358 

MIME type for <source> type attribute 359 
MP4 container 357 
Ogg container 357 

in src attribute of 〈 source〉element 359 
WebM container 357 

Content Delivery Network (GDN) companies, encoding 
services 360 

context, canvas 292, 293, 504. See also Canvas API 
arc method 313-317 
beginPath method 311， 312 
closePath method 312 
drawlmage method 333 
fillRect method 292, 304 
fillStyle property 330, 331 
fillText method 328, 329, 330, 331 
font property 329, 330, 331 
getting 302 

lineTo method 311, 312, 329 
move To method 311 ， 312, 329 
saving and restoring 540 
stroke method 329 
stroke Text method 328 
textAlign property 328,330, 331 
textBaseline property 329 
translate and rotate methods 540 

controls attribute, 〈 video> element 354 
cookies 414—416 

factors that make them problematic 416 
Fireside Ghat, Cookie and Local Storage 426 

coordinates 

computing distance between 180 
latitude and longitude 167 


coordinates object 175, 207 

altitude and altitude Accuracy properties 197 
latitude and longitude properties 173, 175 
properties 190 

coords object, latitude and longitude properties 173 

coords property, position object 190 

createElement method, document object 99, 157, 335, 
450 

create Sticky function (example) 432 
converting to use an array 441 
rewriting to store color with sticky note text 454 
stickies application, final version 444 

createTask function (example) 512 
cross-document messaging 543 
cross-domain issues with XMLHttpRequest 243-252 
CSS 31 

declared standard for styling 5 
positioning video and canvases 395 
property values 308 
selectors 542 

styling <canvas> element, adding border 288 
styling for video booth 381 

using to set width and height attributes of <canvas> 
289 

using to style sticky notes 429 
GSS3 16, 28, 548 
page styling 14 
curly braces ({ }) 

enclosing code blocks 26 
enclosing object properties 132 

currentTime property, audio object 533 

D 

data property, event object 485, 524 
dataTransfer property, event object 543 
datatypes 

conversions in JavaScript 41, 45 
dynamic typing in JavaScript 39 
primitive types 40 

variables in JavaScript, no strict types 38 
Date object, getTime method 140, 272, 442 
defining functions, with parameters 120 
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degradation, graceful 19 
degrees 

angles measured in 316 
converting to radians 317 

latitude and longitude in, converting to decimal values 
167 

degreesToRadians function 180, 317, 319, 344 

delete Sticky function (example) 449 

event object passed to, target information 451 
deleting object properties 135 
developer tools built into browsers 434 
direction parameter, arc method 315 

displayLocation handler function 173, 175 
altering to show map only once 195 
alternative implementation 197, 210 
calls from watchPosition, controlling 206 
displaying new marker only after traveling more than 
20 meters 209 

distance 

computation and mapping of 197 
computing 180 

controlling addition of new map markers 209 
writing code to find 181 

<doctype> element 3 

changes in HTML5 9, 31 

changing HTML 4.01 doctype to HTML5 4 

omitting 9 

document object 56, 154 

createElement method 99, 101, 335, 450 
getElementByld method 59, 157 
getElementsByTagName method 270 
properties and methods 157 
querySelectorAll method 376, 542 
querySelector method 542 
write method 28 

documents, cross-document messaging 543 
dollar sign (S) 

S() function in jQuery 534 

beginning JavaScript variable names 40, 42 

domain property, document object 157 

domains 

cross-origin issues with XMLHttpRequests 244-253 
local storage allocated per domain 422 
origin, and management of local storage 422 


DOM (Document Object Model) 14, 31, 54-65 
adding elements to 100 
adding stickies from local storage 428, 430 
creating 55 

creating new <script> elements to continually update 
data 263, 267 

deleting sticky note from 452 
drawing for songs added to playlist 98， 110 
empty <ul> element for <li> elements to hold song 
names 97 

getting, creating, adding, or removing elements 66 
getting elements from, using j Query 534 
inability to access or change before page fully loads 64 
inserting and replacing JSONP <script> elements 
268 

interaction of JavaScript with 54 

No Dumb Questions 271 

parsing HTML and building DOM from it 81 

replace Child method 270 

returning elements by tag name 270 

selecting elements from, using Selectors API 542 

Sharpen Your Pencil exercise 61 

structure and content of 56 

summary of important points 108 

workers not allowed to access 480 

dot operator (.) 

accessing object properties 133, 134 
invoking methods 151 

Drag and Drop API 543 

draggable attribute 543 

drawGircle function (example) 318 
writing 319 

drawlmage method, canvas context 333 

drawing on the canvas 290—294, 338 
arc method 314 

drawBird function (example) 334, 346 
drawSmileyFace function (example) 321， 344 
drawSquare function (example) 302, 342 

pseudo-code for 303 
writing 304 

drawText function (example) 327, 330, 345 

completing 331 
paths and arcs 311-318 

drop shadows, in canvas 335 

dynamic typing in JavaScript 39 
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effectFunction 

calling to apply video filter 397 

used as variable to hold video filter function 391 

effects 410 

applying to videos 389—391 
choice of, video booth 378 
creating using canvas context translate and rotate 
methods 541 

writing special effects for video 399—404 
element objects 158 

returned by getElementByld method 160 
elements 

accessing with getElementByld 59 
adding to the DOM 100 
creating 99 

getting with getElementByld method 114, 157 
getting with getElementByTagName method 154 
getting with getElementsByGlassName method 154 
getting with getElementsByTagName method 269 
setting attributes with setAttribute method 267 

else clauses in if statements 50 

empty strings 

assigning as value to variable 26 
checking for 95 
comparing variables to 108 

enableHighAccuracy option 198,201 
encoding your own video 360 

ended event, video 365 

adding event listener for 386 
writing handler for 367 

endedHandler function (example) 386 
enumerating properties of an object 133 

error handlers 

for cache errors 538 
Geolocation API 190,207 

for getGurrentPosition 174, 177—179 
for watchPosition 194 
video errors 406 
in workers 522 

error property, video object 405 


errors 

browsers overlooking small errors in HTML files 9 
Geolocation API 
timeout error 200 
types of errors 178 

handling errors with video playback 371 
JavaScript syntax 44 
localStorage, quota exceeded 458 
no XMLHttpRequest errors, 200 response code 239 
video error types 405 

event handling 89 

addEventListener method, registering event handler 
367 

button click handler 102 
clear Watch event handler 195 
creating handler and assigning it to button onclick 
property 91 

handler alerting user that button was clicked 92 

handleRefresh function 265 

handler for ended video event 386 

handlers for video booth buttons 377 

handler to make image of canvas drawing 347 

HTTP request handler 221 

onclick event handler 

create Sticky (example) 431 
delete Sticky (example) 450 
onclick event handler to zoom in on canvas in Fractal 
Viewer 515 

onload event handler for twitter bird image (example) 
333 

onload event handler function for Mighty Gumball 
(example) 229 

onload handler as anonymous function 156 
onmessage event handler for Web Sockets 539 
onmessage event handler for worker 485 
onopen event handler for Web Sockets 539 
previewHandler function (example) 302 
review of important points 108 
reworking handleButtonGlick to obtain song title 
typed into form by user 96 
types of events handled by JavaScript 95 

event object 

data and target properties 485 
dataTransfer property 543 
target property 451 
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events 

anchor click event 376 
button click event 90, 91 ， 92, 93 
cache, notification of 538 
canvas click event 347, 383, 515 
dragstart and dragend events 543 
image load event 333 

properties for event handlers in objects 154 
request load event 221 ， 222, 229 
video 363 

video ended event 367, 386 

window load event 64, 129, 155, 156, 158, 159 

exceptions, QUOTA_EXGEEDED_ERR 458, 468 
exercises 

BE the Browser 48, 78 
building a DOM 57, 81 
interface element values 299,341 
interpreting call to arc method 317, 343 
rendering user interface 298 

Web Workers 488, 526 
cliff-hanger, moving to live server 239, 242 
Code Magnets 51, 80 

canvas, drawText function 327, 345 
geolocation 209 

lucky/unlucky web service 223, 224 
Movie constructor 150, 152 

“whatisHTML5?” 30 
Crossword Puzzle 

canvas 340, 346 
functions and objects 161,163 
geolocation 208, 212 
HTML5 32, 34 

interactions of HTML and JavaScript 109, 111 
JavaScript 76, 84 
local storage 465, 471 
video 409, 411 

web apps talking to the Web 278, 280 

Web Workers 525, 528 
Don't Try This At Home 

how fast browser can find location 202 
local storage, exceeding quota 458, 468 
Express Yourself (JavaScript) 44 
HTML5 archaeology 20 

Pseudo-code Magnets, drawSquare function 303, 342 
Sharpen Your Pencil 

adding song titles to playlist 65, 82 


canvas, drawText function 330 
canvas, showing only new squares in preview 306, 
342 

DOM with secret message 61 
functions 122， 162 
geolocation 171 ， 197, 210 
HTML5 markup 3, 7, 8 
JavaScript statements 44,77 
local storage, deleting a sticky 447, 448 
local storage, problems with stickies implementa¬ 
tion 437, 467 

populating list items from an array 69, 83 
reworking handleButtonGlick function 94, 96 
testing for user input on a form 94, 96 
using setlnterval in web applications 266 
video control buttons, toggle or radio 380, 382 
video playlist, implementing 364, 365 
video, western and sci-fi effects 400, 410 

Web Workers 481, 490, 527 
Shell Game, local storage 425, 466 
Who Does What? 

geolocation options 200, 211 
HTML5 family of technologies 16, 33 
localStorage API 461， 470 
expressions 39, 43 
evaluating 44, 77 
type conversions 45 

F 

false (boolean value) 39 

family of technologies 12, 29 
function of each 16, 33 
file extensions for video 352, 369 

fillBackgroundGolor function 306, 342 
calling 307 

Sharpen Your Pencil exercise 306, 342 
fill method, canvas context 312 

fillRect method, canvas context 292, 304 
effects of fillStyle property on 308 
fillStyle property, canvas context 304 
closer examination of 308 
fillText method, canvas context 325, 328 
using with tweet text (example) 331 
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film noir video filter 374, 399 

Firefox. See also browsers 
HTML5 support 18 
Ogg/Theora video 357 
.ogv video files 352 
WebM/VP8 video 357 

Fireside Ghats 

Cookie and Local Storage 426 
XMLHttpRequest andJSONP 260 

firstGhild property, element object 158 
Flash 

HTML5 versus 284 

use to solve cross-browser issues 20 

Flash Video 358 
flexbox layout 548 

floating point numbers 

conversion of integers to in expressions 45 
storing in local storage 423 

font property, canvas context 329 

setting for tweet text (example) 331 
<footer> element 546 
for loops 47 

deciding between while loops and 47 
evaluating (example) 48 
if/else statements in 51 

forms 16, 85—112 

adding button to 91 

adding t-shirt design form to HTML page 301 
adding tweets to 〈 select〉element in form 323 
checking whether user entered text input 96 
client-side, accessing values in 296 
displaying playlist on HTML page 97 
getting text from input element 94, 108 
HTML5 document to hold form and list element for 
playlist 87 

playlist manager application 102 
sticky note application 429 

updating to add colors 453 
tracking position 193 
t-shirt application interface 298 
using JavaScript for real interactivity 23 

forward slashes (/ /), beginning JavaScript comments 39 


Fractal Explorer application, building (example) 494, 503 
creating Fractal Viewer HTML page 503 
creating workers and giving tasks to 508 
final test drive 519 
getting workers started 510 
handling click events to zoom in 515 
how number of workers affects performance 520 
implementing workers 511 
managing fractal generations 518 
processing workers’ results 514 
ready-baked code for Mandelbrot Set computation 
504-507 
tasks 512 

writing the code 509 
fractal image, Mandelbrot Set as 495 
FTP programs 232 
fullscreen playback of video 360 

functions 113—130, 160 
anatomy of 121 

assigning to window object, onload property 75 

built in 119 

callbacks 254 

constructor 147 

creating your own 115 

Crossword Puzzle 161， 163 

declarations, placement of 127 

defining 71 

how it works 116 

inability to pass to Worker constructor 491 

interview with 119 

invoking 116 

life span of variables 125 

Math library 75 

methods versus 151 

naming 121 

No Dumb Questions 121， 127 

object passed to, accessing properties of 134 

parameters and arguments 120 

passing a function to a function 175 

passing arguments to parameters 122， 162 

passing objects to 134,136 

return statements in the body 117 

reworking as methods 143 

scope of local and global variables 124 

setting special effects for videos 391 
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functions, continued 

Sharpen Your Pencil exercise 122, 162 
using as values 129 
as values 128 

variables defined in 123,160 

G 

generation, fractal (example) 518 

geolocation 165-212 

accuracy of location 191 

adding a Google marker to your map 186 

adding a map to your page 183 

Crossword Puzzle 208, 212 

displaying map on your page 184 

Don't Try This At Home exercise 202 

error handler 177 

finding how fast browser can find location 202 

getGurrentPosition method 175 

how getGurrentPosition works 176 

mapping your position 182 

No Dumb Questions 166, 197 

other uses of Google Maps 188 

server required to test code on mobile devices 179 

Sharpen Your Pencil exercise 171 

alternative implementation for displayLocation 
197, 210 

specifying options 201 
success handler for getGurrentPosition 174 
summary of important points 207 
timeout and maximumAge options 199 
tracking movements 192 
clear Watch handler 195 
with markers on a map 204 
watchLocation handler 194 

watchPosition method 192 
Who Does What? exercise 200, 211 

Geolocation API 16. See also geolocation 

components of 190 

getGurrentPosition method 174, 177, 190, 207 
interview with 189 
position options 198 
watchPosition method 194 

geolocation property, navigator object 174 

getAttribute method, element object 158, 379 

getGontext method, canvas object 292, 293 


getGurrentPosition method, geolocation object 174, 190, 
207 

error handler for 177 
how it works 176 

getElementByld method, document object 58, 72, 157 
using to locate element and change its content 59, 60 
getElementsByGlassName method, document object 157 

getElementsByTagName method, document object 157, 
270 

getFormatExtension function (example) 369, 370 
adding to video booth code 383 
getltem method, localStorage object 419, 421 
getMyLocation function (example) 172 
getNextShowing function (example) 140 
GET request (HTTP) 220 
getStickiesArray function (example) 443 
getTimeFromString function (example) 140 
getTime method, Date object 140, 272, 442 

global variables 123,160 
life cycle of 125 
overuse in JavaScript 127 
reasons for sparing use of 127 
shadowing 126 

Google Chrome. See Chrome 

Google Maps 182 

adding marker to your map 186 
LatLong constructor 183 
other uses of 188 

GPS (Global Positioning System) 168 

devices without, using Geolocation API on 189 
graceful degradation 19 
graphics, SVG 537 

Greenwich, England, longitude measured from 167 

H 

H.264 video format 352, 356, 357 

handleButtonGlick function (example) 90 
assigning to button onclick property 91 
code to create <li> child element and add it to DOM 
101 

reworking to obtain song title typed into form by user 
94, 96 
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running when user clicks button 93 
handleGlick function (example) 515, 516 

handle Control function (example) 377, 384 
implementing rest of video controls 385 
handleRefresh function (example) 265, 267, 272 
adding lastreporttime parameter 275 
handleRequest function (example) 523 
<head> element 

<link> and <script> elements in 5 
placing <script> elements in 53 
replacing 〈 script〉child elements 270 

〈 header〉element 546 

heading property, coordinates object 190, 197 

<hgroup> element 546 

hosting services 230,232 

HTML 

interaction of JavaScript with markup 54 
parsing and building DOM from 57 

HTML5 

converting HTML 4.01 document to 2—5 
Crossword Puzzle 32, 34 

interactions of HTML and JavaScript 109,111 
family of technologies 12 ， 16, 33 
final recommendation of standard 20 
handling older browsers 19 
how it really works 14 
improvements in markup 14 
interview with 11 

JavaScript as integral part of 21 ， 118, 130 

JSONandJSONP 271 

magnets exercise, ’’what is HTML5? M 30 

markup, JavaScript APIs, and CSS 29 

Mighty Gumball application page (example) 218 

new capabilities and features 12 

new elements, reference 545 

No Dumb Questions 9, 20, 28, 284 

page for t-shirt design application 300 

prerequisites for learning 10 

Sharpen Your Pencil exercise 3, 7 

summary of important points 31 

support in browsers 18 

versus using Flash or custom applications 284 
what is it 12 

what you can do with HTML5 and JavaScript 22 
Who Does What? exercise 16, 33 


HTML entities in tweets on canvas 335 
HTTP-based request/response model 539 
HTTP-based video streaming 404 

HTTP used with XMLHttpRequest 
HTTP requests 219, 220, 239 
HTTP responses 219, 221， 239 

accessing returned data 222 
server required to use 230 



id attribute. See also getElementByld method, document 
object 

accessing elements by 59 

<canvas> element 290 

needed to delete sticky note (example) 450 

<script> element 267 

<video> element 353 

IE. See Internet Explorer 

if statements 49 

if/else statements 50 

<iframe> element 543 

IIS servers, configuring MIME types 371 

image, making of t-shirt design drawn in canvas 347 

image objects 
creating 333 
Image constructor 335 

<img> element, <canvas> versus 285 
iMovie, encoding video with 360 

import Scripts global function, Web Workers 493, 511 
using to make JSONP requests 523 
Indexed Database API 543 
indexes, array 75 
Info Window object 187 

init function 64 

as anonymous function 159 
inline code, writing in HTML5 < script〉element 5 

innerHTML property 60 
element object 158 
using to change element content 62 

insertBefore method, element object 158 
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integers 

conversions to floating point numbers in expressions 
45 

converting from strings 423 
storing in localStorage as strings 423 

interface transformations on elements, using jQuery 535 

Internet Explorer. See also browsers 

canvas support, versions 9 and later 294 
HTML5 support 18 

MP4/H.264 video, supported by IE9 357 
no Web Worker support prior to IE 10 482 
versions 6 and 7, not supporting localStorage 104 
video file format 352 
XMLHttpRequest object and 240 

interval timer, stopping 271 

interviews 

with Function 119 
with Geolocation 189 
withHTML5 11 
with JavaScript 24, 477 
with Video 388 

with XMLHttpRequest 225, 240 
invoking functions 116 
with arguments 120 

IP address, location information based on 168 
isButtonPushed helper function (example) 379, 384 
iterating through localStorage 424 



JavaScript 31 ， 35-54 

adding behavior with 35 
adding to web pages 53 
APIs 15 

arrays 67, 69, 71—73 
and objects , 133 
passing to functions 122 
passing to Web Worker 484 
returned from getElementsByTagName 270, 271 
returned from querySelectorAll 376 
and 〈 select〉element options 303 
storing in localStorage 439, 445 
associative arrays 424 
BE the Browser exercise 48, 78, 81 
browser security policy and 244—246 


Code Magnets exercise 51, 80 
canvas, drawText function 327 
displayLocation handler function 209 
Movie constructor 150, 152 
creating dynamic HTML page content 28 
Crossword Puzzle 76, 84 

functions and objects 161， 163 
interactions with HTML 109， 111 
declaring a variable 38-40 
default scripting language in HTML5 5 
drawing on canvas 285 

enabling preview button on t-shirt design app 302 
expressions 43 
functions 113—130, 162 

summary of important points 160 
getElementByld 58 
handling events 89 

review of important points 108 
how it handles tasks of typical page 474 
how it works 36 
and HTML5 21, 22, 118, 130 
Image constructor 335 
including additional files in worker 493 
interaction with page through DOM 15, 58 
interaction with your page 54 
interview with 24, 477 
j Query 534 

line-by-line analysis of code 26 
making decisions, using conditional statements 49 
making HTTP requests from 220—225 
making use of HTML5 family of technologies 24 
Modernizr library 532 
No Dumb Questions 28, 41, 47, 73 
events and handlers 95 
functions 121, 127 
functions and objects 151 
objects 158 
Web Workers 491 
objects 113, 131-161 

summary of important points 160 
property values in 308 
repetitive tasks using loops 46—48 
reserved words 41 
Sharpen Your Pencil exercise 

displayLocation implementation 197, 210 
functions 122, 162 

populating list items from an array 69, 83 
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populating playlist items using an array 65, 82 
reworking handleButtonGlick function 94 
statements 44, 77 

using setlnterval in web applications 266 
single-threaded model 474,477 
summary of important points 75 
syntax 39 

testing code in HTML page 27 
using with HTML5 22 
working with canvas and video 388 
writing 25 

jQuery 534 

online documentation and tutorials 535 
JSON JavaScript Object Notation) 226 
adding support to web application 236 
converting movie object to and from JSON string 
format (example) 227 

creating string representation of an array 441， 467 
Crossword Puzzle 278, 280 
as data 249-251 

gumball sales returned from Mighty Gumball (ex¬ 
ample) 233 
HTML5and 271 
andJSONP 252 
No Dumb Questions 271 

performance issues with use to convert to and from 
strings 442 

tweets returned from Twitter (example) 323 
URL to include last report time (example) 275 
XML and 226 
and XMLHttpRequest 225 

JSON.parse method 226 

converting JSON string back to object 227 
using on arrays or objects retrieved from localStorage 
443, 445 

using when object stored in localStorage 455 
JSONP JSON with Padding) 240, 247 
Crossword Puzzle 278, 280 
Fireside Ghat with XMLHttp Request 260 
HTML5and 271 
introduction to 252 

making call to Mighty Gumball JSONP API (example) 
257 

making call to Twitter JSONP API (example) 322 
making it dynamic 264—271 
No Dumb Questions 271 
P in JSONP, defined 253 


security and 259 

summary of important points 277 
updating web application with 256—263 
using importScripts to make requests 523 

JSON.stringify method 226 

converting object to JSON string format 227 

storing object in local storage 454 

using to store arrays or object in localStorage 442, 

445 

K 

key method, localStorage object 424, 430 

key/value pairs 

in browser's local storage 417 

creating unique keys 442 

managing keys in stickies application 433 

passing key each time sticky note is added to DOM 

450 

storing in an array 439 

in string form, getting and setting in local storage 419, 
421 

uniqueness of keys in local storage 422 

using key to remove item from localStorage and array 

451 



〈 label〉element 453 

lastreporttime query parameter (example) 275 

latitude and longitude 167 

accuracy of geolocation information 179 
latitude and longitude properties, coordinates object 184 
layouts, new, in GSS3 548 

length property 
arrays 68 

localStorage object 424, 430, 432 

letter-boxing video 354 

line breaks in HTML 26 

lines, drawing shapes in canvas 311 

lineTo method, canvas context 311 

lineWidth property, canvas context 312 

<link> elements, within <head> element, pointing to 
CSS stylesheet 5 
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Linux 

Apache server, configuring MIME types 371 
setting up server on 231 

lists 

adding songs to playlist with JavaScript (example) 65, 
82 

creating <li> elements 99 
filling in items using array (example) 69 
finding all child <li> elements of element with id of 
playlist, usingJQuery 535 
playlist manager (example) 

adding <li> child element to <ul> parent 100, 
110 

<li> elements to hold song names 97, 99 
<ul> element to hold playlist 87, 97 
setting background color for alternating rows 548 
stickies application (example) 

creating <li> element to hold sticky note 430 
stickies from localStorage inserted into <ul> ele¬ 
ment 430 

<ul> element to hold stickies 429 
load event 

and image onload property 333 
and window.onload property 64 

load method 

audio object 533 
video object 385 

Local Files origin 422 

local storage 16, 108, 413-472 
5MB limit and domain 422 
access by workers 491 

array-based code, integrating into stickies application 
443 

associative arrays 424 
browser-based, instead of cookies 23 
browser issues with file:// 422 
browsers' tools for managing 434 
browser storage, history of 414—416 
code to save playlist 104 
Crossword Puzzle 465, 471 
deleting items 446 

designing your application storage 457 
Don't Try This At Home exercise 458, 468 
exceeding capacity of 458 
Fireside Ghat, Cookie and Local Storage 426 


how HTML5 Web storage works 417 
how local storage API works 420 
IndexedDB and Web SQL 543 
naming of keys 433, 445 
No Dumb Questions 422, 425, 433, 442, 445 
problems with using length to store keys 436 
sessionStorage object 460 
Sharpen Your Pencil exercise 
deleting a sticky 447, 448 
problems with stickies implementation 437, 467 
Shell Game exercise 425, 466 
stickies application 418, 428 
storing arrays 440 
storing non-String data types 439 
storing numbers 423 
storing objects 454-457 
summary of important points 464 
using 462 

Who Does What? exercise 461, 470 
localStorage object 418 
clear method 435 
getltem method 419, 421 
key method 424 
length property 424 
removeltem method 433, 446, 449 
setltem method 418, 421 
treating as associative array 424 

localStorage property, window object 422 

local variables 123,160 
life cycle of 125 
shadowing global variable 126 

location 

accuracy of 191 

Geolocation API in JavaScript 166 
how Geolocation API determines it 168 

location aware 165 

loop attribute, <video> element 354 

loop property, video object 385 

looping 37, 46-48 

deciding between while and for loops 47 
evaluating while and for loops (example) 48 
for loops 47 

using arrays with loops 69, 75 
while loops 46 
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M 

Mac 

Apache server, configuring MIME types 371 
setting up server on 231 
task monitor on OS X 520 

makelmage function (example) 347 

makeServerRequest function (example) 523 

Mandelbrot, Benoit 495 

Mandelbrot Set. See also Fractal Explorer application, 
building 

computing 496 
equation 495 
explorer for 494 

ready-baked code for computing 504-507 
using multiple workers to compute 497—500 

map Options object 184 

mapping your position 182 

maps 

adding markers to 186, 204 
adding to a page 183 
displaying on your page 184 
testing map display on your page 185 

<mark> element 547 

markers, adding to map 186, 204 

controlling frequency of new markers 209 
optimizing marker usage 206 

markup, new 16, 533 
Math.floor function 70, 304, 319 
Math library 73, 75 
Math.PI 317 

Math.random function 70,304,319 

x, y, and width of squares drawn on canvas 308 
maximumAge option 199, 201 
message handler, writing for worker 486 
messages 

data that can be sent 484, 491 

receiving by Web Worker 486 

receiving from Web Workers 485 

sending and receiving using Web Sockets 539 

sending from Web Worker 486 

sending to Web Workers 484 


messaging, cross-document 543 

<meta> tags 31 
omitting 9 

specifying in HTML5 4 
methods 142, 160 
code reuse and 146 
converting functions to 143 
functions versus 151 
this keyword, how it works 149 

Microsoft. See also Internet Explorer; Windows systems 
Smooth Streaming 404 
Web Platform Installer 231 

Mighty Gumball application (example) 214-218 
browser cache, watching out for 272 
displaying sales 230 
improving the display 235 
makingJSONP dynamic 264—271 
moving to live server 237—246 
options to circumvent cross-origin request problems 
247—251 

removing duplicate sales reports 273 

reviewing the specs 228 

reworking code to use JSON 236 

testing locally 230, 234 

updating code to use JSONP 256—263 

updating JSON URL with lastreporttime 275 

writing onload handler function 229 

milliseconds since 1970 442 
MIME types 

application/xhtml+xml 536 

making sure server is serving video files with correct 
type 371 

of video files 359, 369 
mobile browsers 20 
HTML5 support 18 
mobile devices 

browser support for offline web apps 538 

canvas on 335 

testing geolocation code 179 

Modernizr library, JavaScript 532 

movements, tracking 192—198 

form to start and stop tracking 193 
move To method, canvas context 311 
.mp3 audio 533 
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.mp4 video files 352 
MP4 container 357 
MPEG-LA group 357 
multi-core processors 500 
muted property, video object 385 

N 

names 

of functions 121 

guide to better naming of variables 42 
local and global variables with same name 126 
localStorage keys 433, 445 
of variables 40 

namespaces, XHTML 536 
<nav> element 547 

navigator object, geolocation property 174 
new keyword, using with constructors 148, 160 
nextVideo handler function 367 

No Dumb Questions 
canvas 289, 293, 308 
events and handlers 95 
functions 121， 127 
functions and objects 151 
geolocation 166, 197 
HTML5 9, 20 

HTML5 web applications 284 

JavaScript 41, 47, 73 

JavaScript and HTML5 technologies 28 

local storage 422, 425, 433, 442, 445 

objects 158 

talking to the Web 271 

video 360, 371 

Web Workers 491 

nth-child selector 548 

numbers 

conversions to other types in expressions 45 
primitive type in JavaScript 40 
storing in local storage 423 

numeric expressions 43 

0 

<object> element, using inside <video> element 362 


object literals 151 

objects 40, 113, 131—161 

adding or deleting properties at any time 135 

array 73 

arrays of 457 

in the browser 154 

built-in versus created by users 159 

constructors 147 

converting to and from JSON string format 226, 227 
creating 132 

movie object (example) 138 

using constructors 148, 153 
Crossword Puzzle 161 
methods 142 

No Dumb Questions 151, 158 
passing to functions 136 
properties 132 

storing in localStorage 445, 454 
storing shapes drawn in canvas as 336 
summary of important points 160 
this keyword 144 
uses of 133 

writing versus creating with a constructor 151 
offline web applications 16, 538 
Ogg container format 357 
Ogg/Theora video encoding 356, 357 
Ogg/Vorbis audio encoding 356, 357, 533 
.ogv video files 357 

onclick property, button objects 91, 154 
adding event handler function to 91, 450 
onerror handler, using in workers 522 

onload handler function 64, 229 

and anonymous functions 129, 156 

using to load page before accessing the DOM 64 

writing with jQuery 534 

onload property 

image object 333 
window object 156 

assigning function to 64, 75, 129, 156, 265 
XMLHttpRequest object 239 

browsers not supporting, work around for 241 
onmessage event handler 485 

opacity property 548 

opacity, transitioning from opaque to translucent 548 
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open event, Web Sockets 539 

Opera. See also browsers 
HTML5 support 18 

not supporting XMLHttpRequest Level 1 241 
Ogg/Theora video 357 
.ogv video files 352 
WebM/VP8 video 357 

<option> element, in stickies application form 453 

options, geolocation API 198, 201 
summary of 207 

Who Does What exercise 200, 211 
overlays, Google Maps 188 

P 

palindromes 51 

panTo method, map object 204 

parameters, function 120 
names of 121 

passing arguments to parameters 116, 122, 162 
parent element 

adding a child element with appendGhild 100, 101 ， 
102 

adding child elements to 108 
in DOM 100 

parseFloat function 423 

parselnt function 423 

parse method. JSON.parse method 

passing by value 136 

passing an object reference to a function 136 
paths and arcs in canvas 310, 338 
arc method 313-315 
drawing a smiley face 344 
using arc method and path 343 
using arc method to draw a circle 316 
using arc method to trace a path 316 
using paths to draw shapes 311 

pause method 

audio object 533 
video object 385 

PC, setting up server on 231 
Phrase-o-Matic application (example) 70 
pillar-boxing, video 354 


ping pong Web Workers game (example) 484 
adding workers 491， 492 
BE the Browser exercise 488, 526 
pingPong message handler function for worker 486 

pixels 

accessing in video 392 
in bitmap drawing 336 
drawing on canvas 281， 306 
as presentation, not content 326 
processing in canvas scratch buffer 394, 397 
processing video pixels and getting them into canvas 
for display 396 

play button (example) 

handler for video booth 377 
popping back up when video ends 386 

playlist manager, creating 86 

adding code to save playlist 105 
app used to enter sons：, click button, and add song to 
playlist 102 

code to save the playlist 104 
displaying playlist on HTML page 97 
DOM after song titles are added to playlist 98, 110 
getting song name from text input element 94 
handling Add Song button click events 89 
HTML5 document to hold form and list element for 
playlist 87 

integrating storage code 106 
playlists 

creating video playlist 364 
implementing for Webville TV (example) 366 
populating with song titles using JavaScript array 65, 
82 

play method 

audio object 533 
video object 385 

plus sign (+) 

addition or string concatenation operator 45 
string concatenation operator 26 

png image format 347 

position object 175, 207 

coords and timestamp properties 190 
positionOptions, Geolocation API 190, 198 
postAQuote function (example) 523 
poster attribute, <video> element 353, 354 
poster property, video object 406 
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postMessage method 
Web Sockets 539 
worker object 484, 511, 512 

<p> (paragraph) elements, changing using JavaScript 62 

preload attribute, <video> element 354 

presentation, separate from content, in canvas 326 

previewHandler function (example) 302 
calling fillBackgroundGolor function 307 
updating to call drawText function 330 

preview in t-shirt design app, problems with 306 

primitive types 40 

processFrame function (example) 396 
running again 397 

processing video frame in canvas scratch buffer 397 

processWork function (example) 514, 518 

programtheweb.com 271 

<progress> element 547 

progressive video 403 

properties 132 

accessing, changing value, and enumerating 133 
adding or deleting at any time 135 
canvas context object 338 
fillStyle property 308 
text properties 328 
document object 154, 157 
element object 158 
Geolocation API 190 
localStorage, length property 424 
new, in GSS3 548 
objects as collections of 131 
specifying values in JavaScript 308 
video object 363 
window object 155 

pushUnpushButtons helper function 376, 379, 384 
putlmageData method, canvas context 397 

querySelectorAll method, document object 376, 542 
querySelector method, document object 542 
Quicktime 371 

QUOTA_EXGEEDED_ERR exception 458, 468 
quotation marks, double. See u ”， under Symbols 


R 

radians 316 

converting degrees to 317 
radio buttons 380, 382 
radius parameter of arc method 314 
reassign Worker function (example) 514, 518 

rectangles, drawing in canvas 338 
drawing filled rectangle 292 
references, object 136 

removeltem method, localStorage object 433, 446 

remove StickyFromDOM function (example) 452 

repetitive tasks 46 

replace Child method 270 

request/response model based on HTTP 539 

reserved words in JavaScript 41 

resizeToWindow function (example) 517 

responseText property, request object 222 

restore method, canvas context 540 

results from workers' computations 

from Fractal Explorer workers (example) 513 
processing in Fractal Explorer (example) 514 
receiving results from workers 485, 498 
stored in event.data property 485 

return statements 

in function body 117 
functions without 119 

RGB color values for pixels, processing video frame data 
397,410 

rotate method, canvas context 540 



Safari 20. See also browsers 

developer tools for local storage 434 
H.264 video format 352 
HTML5 support 18 
MP4/H.264 video 357 
Quicktime player for mp4 video 371 

save and restore methods, canvas context 540 
Scalable Vector Graphics (SVG) 537 
sci-fi effect for video 374, 400, 410 
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scope, variables 124 

scratch buffer, video processing with 390, 393 
implementing buffer with canvas 395-398 
〈 script〉elements 27 

adding to HTML file for call to Twitter JSONP API 
322 

adding to HTML in <head> or <body> 53 
creating and inserting dynamically 263, 267—269 
retrieving data with 248-251, 257 
script injection 271 
specifying in HTML5 5 

scrollMapToPosition function (example) 204 
adding to application 205 
<section> element 546 
security, JSONP and 259 
security policy, browsers 244 

selectedlndex property, selection form controls 302 
how it works 303 
〈 select〉element 301, 453 
Selectors API 542 
selectors, new, in CSS3 548 
semicolon (;), ending JavaScript statements 39 
send method, XMLHttpRequest object 221 
servers 230 

moving to live server 237 

problem when moving to live server 242 

setting up your own Web server 231 

sessionStorage object 460 

setAttribute method, element object 158, 274, 275 
setting sticky’s id to its unique key 450 
using to set the class attribute 236, 257, 379, 430 
using to set the id attribute 267, 269, 450 
using to set the src attribute 267, 269 

setEffect handler function, video booth (example) 378, 
391 

setlnterval method, window object 263, 265 
using with Web Workers 523 
setltem method, localStorage object 418, 421 

setTimeout method, window object 
timeout parameter of 0 398 
using to process video frame data 397 


using with Web Workers 523 

setupGraphics function (example) 509 

setVideo handler function, video booth (example) 378, 

387 

SGML 9 

shadowBlur property, canvas context 335 
shadowGolor property, canvas context 335 
shadowing variables 126 

shadowOffsetX and shadowOffsetY properties, canvas 
context 335 

showMap function (example) 184 

creating map and displaying marker for initial location 
205 

making sure it’s called only once 195 
single-threaded model, JavaScript 474, 477 
breaking down 475 

slashes (/ /), beginning JavaScript comments 39 
slow script message 473 

〈 source〉element 
src attribute 359 
type attribute 359 

using inside <video> element for each video format 
358 

special effects 

applying to videos 389—391 
functions 399, 410 

speed property, coordinates object 190, 197 
splice method, Array object 449 
SQL, Web 543 

square brackets ([]) 

accessing object properties 133 
and associative arrays 424 
creating and indexing arrays 67 
using with localStorage 424 

squares, drawing on canvas 302 

creating with fillRect 290, 292, 304 
filling background color of canvas before drawing new 
squares 306 

pseudo-code for drawSquare function 303 
random x, y，and width of squares 308 
writing drawSquare function 304 
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src attribute 

〈 script〉element 53, 218, 249 

updating with setAttribute 267 
<source> element 358, 359 
<video> element 353, 354 

src property 

audio object 533 
image object 333 
video object 370 

start Workers function (example) 509, 510 

statements 37 

ending with semicolon 39 
stickies application (example) 418, 428 

adding "Add Sticky Note to Self' button 431 

adding JavaScript code 430 

converting create Sticky to use an array 441 

creating interface 429 

deleting sticky from DOM 452 

deleting sticky notes 446 

design flaw 436 

integrating array-based code 443 

rewriting to use an array 440 

selecting sticky note to delete 450 

updating user interface to specify color 453—456 

streaming video 403 
technologies for 404 
string concatenation operator (+) 26, 45 
string expressions 43 

stringify method. JSON.stringify method 
strings 

accessing and enumerating object properties 133 
in arrays 71 

as associative array indexes 424 
conversions to numbers in expressions 45 
converting objects toJSON string format 226 
converting to floats with parseFloat function 423 
converting to integers with parselnt function 423 
creating string representation of an array 441, 467 
key/value pairs stored in local storage 418 
as objects 159 

primitive type in JavaScript 40 

receiving from Web Workers with onmessage in event, 
data property 485 

sending to Web Workers with postMessage 484 


stroke method, canvas context 312 
stroke Text method, canvas context 328 
structure 35, 545 

〈 style〉element 

adding border to canvas 288 
CSS is style standard 9, 31 

style property 455 
subworkers 523 

success handler, Geolocation API 174, 175, 190 
SVG (Scalable Vector Graphics) 537 

T 

table and table-cell layouts 548 

target property, event object 451, 485 

task monitor on OS X or Windows 520 

tasks, sending and receiving data from Web Workers 
(Fractal Explorer example) 512 

terminate method, worker object 522 

text Align property, canvas context 328 

aligning tweet text in t-shirt design app (example) 331 
textBaseline property, canvas context 329 

text, drawing on canvas 325—332, 338 
displaying HTML entities 335 
drawText function 345 
splitting it into lines 335 

text methods and properties in canvas API 328 
text <input> element, value property 94 
checking whether user entered input 96 
Theora video format 357 
third-party hosting services 230, 232 
this (keyword) 144 

adding to movie object (example) 145 
questions and answers about 151 
using with constructors 147 
using with method calls 149, 151 

threading. See also Web Workers 

adding another thread of control 476 
single-threaded model, JavaScript 474 
with Web Workers 478, 524 
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time 

Date object, getTime method 442 
milliseconds since 1970 442 
<time> element 547 

timeout option 199,201 

timestamp property, position object 190 

timeupdate event 398 

title property, document object 157 

toDataURL method, canvas object 347 

toggle buttons 380, 382 

tracking movements 192—198 

form to start and stop tracking 193 
transition property 548 

translate and rotate methods, canvas context 540 

triangles, drawing on canvas 311 

true and false (boolean values) 39 

try/catch statements, capturing exceptions 458, 468 

t-shirt 282. See also TweetShirt Web Application 

TweetShirt Web Application (example) 282 

adding tweets to 〈 select〉element in <form> 323 
adding user interface form to HTML page 301 
creating application design 297 
drawing an image 333 
drawing circles 318 
drawing squares 304 
drawing text 324, 327, 330, 331 
filling the background color 306 
form for application interface 298 
getting tweets from Twitter 322 
making image of design to upload and have printed 
on shirt 347 

requirements and user interface 283 
reviewing implementation plan 296 

Twitter JSONP API, making call to 322 
type attribute 

removal from <link> and <script> tags 5 
<source> element 359 

II 

ul.appendGhild method 101 
undefined values 73 

returned by functions without return statement 121 


underscore (_)，beginning variable names 40, 42 

update Sales function (example) 230 

update Tweets callback function (example) 323 

URL property, document object 157 

URLs 

callback parameter 254 
setting up JSONP URL (example) 267 
updating JSON URL to include last report time (ex¬ 
ample) 275 
Web Socket 539 

work around for browser caching 272 
UTF-8 9, 31 

V 

value attribute, text 〈 input〉element 95 

value property, text <input> element 94 
value attribute versus 95 
values 

changing object property values 133 
functions as 128,129 
object property values 132 

variables 

assigning functions to 128 

chaining value of 39, 133, 141 

comparing to empty string 108 

declaring and assigning value 26, 38 

local and global 123， 160 

naming 40, 42 

objects assigned to 136 

passing to functions 121 

scope of 124 

shadowing 126 

short life of 125 

var keyword 39 

vector fonts 329 

vector graphics vs. bitmap 336 

video 16, 349-412 

adding format information in the <source> element 
359 

booth (example) 373 

adding special effects 389-391 
code to process the video 396 
demo unit 374—376 
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video, continued 

getting demo videos ready 383 

helper functions 379 

implementing video controls 384—386 

overview of video processing 392 

setEffect and setVideo handlers 378 

switching test videos 387 

video processing using scratch buffer 393 

writing special effects 399—404 
browser support, determining level of 361, 411 
canPlayType method, how it works 369—375 
codecs 357, 358 

controls’ appearance in different browsers 355 
Crossword Puzzle 409, 411 
error event, using 406 
errors 405 

falling back to supported player 362 
formats 352, 356, 358 

and possibility of standardization 360 
hosted on the web 403 
how <video> element works 353 
ideas for further development 407 
No Dumb Questions 360, 371 
Sharpen Your Pencil exercise 

control buttons, toggle or radio 380, 382 
implementing playlist 364, 365 

western and sci-fi effects 400, 410 
streaming 403 

summary of important points 408 
testing for browser support when using code to load 
video 368 

things to watch out for 371 
using JavaScript with HTML5 23 
Webville TV (example) 350 

building with HTML5 technology 350 
designing the playlist 365 

handler for ended event to go to next video 367 
HTML5 page 351 

implementing getFormatExtension function with 
canPlayType 369 

implementing nextVideo function 367 
implementing video playlist 366 
integrating getFormatExtension function 370 
<video > element 

attributes 354, 408 
how it works 353 
interview with 388 


methods, properties, and events 363 
new HTML5 element and API 351 
<object> element within 362 
partnership with <canvas> element 339, 388 
<source> element within 358 

video object 

accessing frame data 396 

canPlayType method 368-374 

error property 406 

load method 385 

loop property 385 

methods, properties, and events 363 

muted property 385 

pause method 385 

play method 366, 385 

properties, methods, and events 408 

src property 366, 387 

volume property 360 

viewport 354 

volume property 
audio object 533 
video object 360 

Vorbis audio codec 357 
VP8 video codec 357 

w 

W3C 20 
WampServer 231 
watchld variable (example) 194 
Watch it! 

browsers not supporting XMLHttpRequest's onload 
property 229 

deleting all items from local store 435 
ensuring that server is serving video files of correct 
MIME type 371 

grabbing image from canvas, and code run from 
file:// 347 

Internet Explorer not supporting Web Workers prior 
to IE 10 482 

local storage and browser issues with file:/ / 422 
pages served from file://, security restrictions in 
Chrome 371 

pushing browser over local storage limit 459 
Quicktime need to play mp4 video in Safari 371 
rapid changes in video support by browsers 411 
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Ready Bake Code not working in some browsers 104 
security restrictions in Chrome preventing running of 
Web Workers from file 482 
server required to test geolocation code on mobile 
devices 179 

work around for browsers not supporting XML- 
HttpRequest's onload property 241 

watchLocation function (example) 194 

watchPosition method, geolocation object 190, 192 ， 194, 
207 

controlling updates of location 197 
too many calls to display Location 206 

wav audio format 533 

web applications 
APIs to create 15 
examples 22 
and HTML5 6, 13 
and JavaScript 21, 24 
offline 538 
what is it 28 

WebKit-based browsers 20. See also browsers 
HTML5 support 18 
.webm video file format 352, 357 
WebM/VP8 video container format 357 
web pages vs. web applications 28 
Web Platform Installer (Microsoft) 231 
web services 213 

how it works, Mighty Gumball (example) 216 
JSONP security issues and 259 
keeping an open connection with, using Web Sockets 
539 

lucky/unlucky service 224 
parameters supported 271,274 
receivingJSON data from 233 
specifying callback function for 254 
usingJSONP with 253 
using XMLHttpRequest with 220 
ways to access, in public API 271 
XMLHttpRequest, cross domain security issues with 
244 

Web Sharing (Mac) 231 
Web Sockets 539 
Web SQL 543 

Web Storage API 108, 418. See also local storage; 
localStorage object 


support for 422 
Web Workers 16, 473-530 

adding another thread of control 476 

adding workers to pingPong game (example) 491, 492 

BE the Browser exercise 488, 526 

browsers' support of 482 

building explorer for Mandelbrot Set 494 

building Fractal Explorer application (example) 503, 

509 

creating 483 

creating and giving tasks to 508 

Crossword Puzzle 525, 52B 

data types that can be sent to workers 484 

getting workers started in Fractal Explorer application 

510 

handling click event to zoom in on canvas in Fractal 
Explorer (example) 515 
handling errors in workers 522 
how they work 478 

how workers make your apps faster 500 
implementing in Fractal Explorer application 511 
import Scripts global function 493 
managing fractal generations in Fractal Viewer 518 
No Dumb Questions 491 
number of workers 

effects on performance 520 
limits on 501 

processing workers’ results in Fractal Explorer 514 
ready-baked code for workers’ computation of Man¬ 
delbrot Set 504-507 
receiving a message from the worker 485 
results from workers' computations 513 
rewriting pseudo-code to use workers 502 
sending a message to the worker 484 
Sharpen Your Pencil exercise 
potential uses for workers 481 
using compact workers 490, 527 
subworkers 523 

summary of important points 524 
tasks for Fractal Explorer workers 512 
terminating 522 

using importScripts to make JSONP requests 523 
using multiple workers to compute Mandelbrot Set 
497-500 

why workers can't access the DOM 480 
writing worker’s message handler 486 

western effect for video 374, 400, 410 
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“Wherever you go, there you are.” (Geolocation example) 
192 

while loops 46 

deciding between for loops and 47 
evaluating (example) 48 
example in JavaScript 26 
if/else statements in 50 

white space in JavaScript code 39 

width and height attributes 
<canvas> element 286 

setting using CSS 289 
<video> element 353, 354 

WiFi positioning 169 
window object 154 

creating onload event handler for 64, 75, 159 

document object property 155 

as global object 156, 158 

localStorage property 422 

location property 347 

onload property 64, 156 

properties and methods 155 

setlnterval method 155, 265 

setTimeout method 155, 397 

windows 

adding info window for Google Maps marker (ex¬ 
ample) 187 

fitting canvas to browser window in Fractal Viewer 
(example) 517 

Windows systems 

installing web server on 231 
making sure server is serving video with correct 
MIME type 371 
task monitor 520 

worker object. See also Web Workers 
close method 522 
creating 483 

creating and using multiple 491， 492 


onerror property 522 
onmessage property 485 
postMessage method 484 
subworkers 523 
terminate method 522 

X 

XHTML 9, 536 
problems with 11 
XML 

JSON versus 226, 271 
SVG graphics 537 
uses of XHTML for 536 

XMLHttpRequest object 220, 239 
accessing response text 222 

cross-domain requests, security issues with 244, 277 

Crossword Puzzle 278, 280 

Fireside Ghat withJSONP 260 

interview with 225, 240 

Level 2 240 

onload handler function 229 
requests made by workers 491 
retrievingJSONP data with 233 
server required for use of 230 
when to use 246, 277 

work around for browsers not supporting Level 2 241 

z 

zooming in on canvas in Fractal Viewer (example) 515 
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site? We've got answers to some 
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guides to how to do more and 
daily updates on the blog from 
、 the authors! ^ 
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